Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to set the frame model in Css", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to set the frame model in Css" article.

Box model aliases: box properties, box properties, box model

The frame model mainly sets the outer margin, inner margin, border, width and height of the element.

Element actual width = left outer margin + left border + left inner margin + width + right inner margin + right border + right outer margin

What is the outer margin? That is, the blank area around the border of the element, the page will add extra white space to the element, the outer margin is transparent, and the position is outside the border.

Attribute: margin

Uniformly set the outer margin of the four directions

Margin: value, such as margin:10px

Unidirectional setting

Margin-left/right/top/bottom: value

Margin abbreviation

Margin:value; (four directions)

Margin:value (upper and lower) value (left)

Margin:value (top) value (left and right) value (bottom)

Margin:value (top) value (right) value (bottom) value (left)

Value of margin (unit) px,%

Auto: if the left and right margin is set to auto, the current element will be centered horizontally in its outer container, mostly if the block-level element is centered horizontally in its outer container

Value is negative:

Outer margin merging

When two vertical margins meet, they will form an outer margin. It is called outer margin merging. The value of the outer margin is dominated by a large value.

problem

Inner and outer nested div elements, if you set the margin-top of the inner layer div, will act on the margin-top of the outer layer div by default, while the inner layer has no effect.

Solution:

1. Add a border to the outer element

2. It is realized by the upper inner margin of the outer element.

3. Inner margin

What is the inner margin, that is, the control between the content area and the border

Features: after setting the inner margin of the element, the whole element area will be enlarged

Attribute

Padding: value; up and down

Padding: value (up and down) value (left and right)

Padding: value value value

Padding: value value value value

Padding-top:

Padding-bottom:

Padding-left:

Padding-right:

Css rewrite / reset

Some elements have been removed (ul,p,h2....) Built-in style

* {

Margin:0px

Padding:0px

}

Ul {

Padding:20px

}

The above is about the content of this article on "how to set the frame model in Css". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.