CSS box model, including 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 element's width + padding + The left margin of the margin and the value of the right margin + border width; The total height of the element frame = height + padding of element The value of the top and bottom margin of margin + the value of the top and bottom margin + border's upper and lower width.
Once the appropriate DTD has been set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct. According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately. Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border. Although there are ways to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try adding padding or margins to the element's parent and child elements. IE8 and earlier versions of IE do not support setting padding width and Border width properties. Resolving IE8 and earlier incompatibility issues can be declared on an HTML page.
Box-sizing:content-box|border-box|inherit.
Box-sizing:content-box represents the default value, Width includes only the contents of the box, that is, the total width = margin+padding+border+width;
Box-sizing:border-box. Width includes the Padding,margin,border value, which is the total width = margin+width;
The application and small problem of the frame model that are encountered in the actual development.
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;}
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
CSS Box model
