Box model is the core of html+css, understanding this important concept in order to better layout, page layout. The following is the accumulation and summary of the CSS box model of the Knowledge ^_^, I hope to be useful for beginners.
First, CSS box model concept
CSS CSS box model, also known as box model, contains elements content, padding (padding), Border (border), margin (margin).
The most internal box in the diagram is the actual content of the element, that is, the element box, the outer edge of the element box is the inner margin padding, followed by the border (border), and then the outermost margin (margin), the entire structure of the box model. We usually set the background display area, which is the range of content, padding, border. Margin margins are transparent and do not obscure the surrounding elements.
Then, the total width of the element box = The value of the left and right margin of the width + padding of the element and the left margin of the margin plus the right margin;
The total height of the element box = the value of the upper and lower margin of the padding (element) + The top margin of the margin.
Second, CSS margin merge (overlay)
Two when the adjacent element box meets vertically, the margin is merged, and the height of the merged margin is equal to the value of the higher margin in the outer margin where the merge occurred.
It is easier to understand, so sometimes it is necessary to consider this factor in the actual situation on the page. Of course, the outside of the merger actually has the meaning of existence, such as:
Note that margin merging is only possible with the vertical margin of the block box in the normal document stream. Margins between inline boxes, floating boxes, or absolute positioning are not merged.
CSS reset is also used frequently in the
{ : 0; : 0;}
Three, box-sizing property introduction
The Box-sizing property is one of the user interface properties and is introduced because it is related to the box model and is likely to be used in CSS reset.
Box-sizing:content-box|border-box|inherit;
(1) Content-box , the default value, allows you to apply the set width and height values to the element's content box. The width of the box contains only the contents.
That is, the total width =margin+border+padding+width
(2) Border-box , the width value of the set is in fact the total breadth of the border+padding+element except for margin. The width of the box contains border+padding+ content
That is, the total width =margin+width
Many CSS frameworks will simplify the calculation of box models.
(3) inherit , specifies that the value of the Box-sizing property should be inherited from the parent element
Iv. application and minor problems encountered in the actual development of the frame model.
1 margin out of bounds (margin-top of the first child element and margin-bottom of the last child element)
Take the margin-top of the first child element as an example:
When the parent element does not have a border border, when the Margin-top value of the first child element is set, the Margin-top value is added to the parent element, and there are four workarounds:
(1) Add border to parent element border (side effect)
(2) Set the padding value (side effect) for the parent element
(3) parent element add Overflow:hidden (side effect)
(4) parent element plus predecessor content generation. Recommended
Take the fourth method as an example:
. Parent{width:500px;Height:500px;Background-color:Red; }. Parent:before{content: " ";Display:Table;}. Child{width:200px;Height:200px;Background-color:Green;Margin-top:50px;}
<class= "parent"> <class= " Child "></div></div>
2 A box model between browsers.
(1) UL tag in Mozilla default is padding value, and in IE only margin has value.
(2) The difference between the standard box model and IE Model:
The standard box model is the one described above, and the IE model is more like a box-sizing:border-box; Its content width also includes border and padding. The workaround is to add the DOCTYPE declaration to the HTML template.
3 draw a triangle with a box model
<!DOCTYPE HTML><HTML> <Head> <style>. Triangle{width:0;Height:0;Border:100px Solid Transparent;Border-top:100px Solid Blue*/* Here you can set border top, bottom, left, right four-direction triangles * / } </style> </Head> <Body> <Divclass= "Triangle"></Div> </Body></HTML>
The page displays the result:
end~~~ ^+^
2016.7.22
CSS Box Model understanding