CSS quirks box model and standard box model example detailed

In the HTML document, each page is rendered in the label is a box model, this article mainly introduces the detailed CSS box model and standard box model, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

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)