CSS box model full explanation, weird mode box model

When you create a new HTML page with the editor, you will find a DOCTYPE tag on the top, for example:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" ><! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" ><! DOCTYPE html>

The above several DOCTYPE are standard document types, regardless of which mode is used to complete the definition of DOCTYPE, will trigger the Standard mode , and if doctype is missing will be triggered under the IE6,IE7,IE8 Weird mode (quirks mode).

First define a DIV block to demonstrate the difference between a standard pattern and a weird one, and here's the CSS style

. box {    width:200px;    height:200px;    border:20px solid black;    padding:50px;    margin:50px;}

Box model in Standard mode as shown, total width/height of box =width/height+padding+border+margin

Standard Mode box model

Box model in quirks mode as shown, the total width and height of the box are included in the width of the inner margin padding and border border, the total width/height of the box is =width/height + margin = content Area width/height + padding + border + margin;

Weird Mode box model

See here you should have a clear understanding of the two models of the box model, the following on the basis of the introduction of the CSS3 attribute box-sizing;

Box-sizing has two values one is Content-box and the other is Border-box.

When set to Box-sizing:content-box, will use the Standard mode analytic calculation, is also the default mode;

When set to Box-sizing:border-box, the odd mode is used to parse the calculation;

The current use of this property requires the following prefixes:

-webkit-box-sizing:content-box;-moz-box-sizing:content-box;

CSS box model full explanation, weird mode box model