How CSS quirks box models and standard box models are used

This time to bring you the CSS weird box model and standard box model how to use, using the CSS weird box model and standard box model of the attention to what, the following is the actual case, take a look.

In an HTML document, each label that is rendered on the page is a box model.

The box model is also divided into: W3C标准的盒子模型 and IE标准的盒子模型 .

As most of the mainstream browser support is the standard box model (standard box model), but also to preserve the weird box style parsing, of course, ie followed by its own standard box model (weird box model)

The two box models are described in two simple examples:

Standard Box Model:

<!--html--><p class= "Box1" >    <p class= "Box2" ></p></p>

<!--css-->.box1{         width:200px;         height:200px;         Background-color:aqua;         padding:30px;        }. box2{         width:200px;         height:200px;         background-color:red;        }

The width and height of the outer box here are: + + + + = 260px.

Weird box model

< add box-sizing attribute--><!--css!--box-sizing properties: border-box (weird box model), Content-box (standard box model)-->.box1{         width : 200px;         height:200px;         Background-color:aqua;         padding:30px;         Box-sizing:border-box;        }. box2{         width:200px;         height:200px;         background-color:red;        }

The width and height of the outer box here are: + 140+ = 200px.

Here is a conclusion:

Standard box model, the total width of a block = width (content width) + margin (left and right) + padding (left and right) + border (left or right)

Weird box model, total width of a block = width (content + border + padding) + margin (left/right)

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Descendant selectors for CSS

On the layout of CSS Web pages