CSS Box model

Box model is divided into box model and IE box model

IE box model:width/height = content + padding + border,

The width or height of the box model is calculated as:width/height = Content.

CSS3 Property Box-sizing

If we calculate the length and width of a box, we are generally the thickness of the box itself plus the space in the box, where in the IE box model and the box model, we will feel that the IE box model more logical.

Different people have different habits, so CSS3 added a property Box-sizing:content-box | border-box | Inherit, the default value is content-box. If the value is content-box, that element follows the box model, and if the value is border-box, that element follows the IE box model, and if the value is inherit, the value of the property should inherit from the parent element.

In fact, the browser to choose which box model, mainly to see the browser in the standard mode (standards mode) or Strange mode (Quirks modes). We all remember <!. Doctype> statement, this is to tell the browser which version of the HTML to choose,<! Doctype> is usually followed by a DTD declaration, if there is a DTD declaration, the browser is in the standard mode, if there is no DTD declaration or HTML4 DTD declaration, the browser in its own way to parse the code, in a strange mode.

In the standard mode of the browser (IE version must be 6 or more than 6 ), will choose the box model analysis code, in the strange mode of the browser, will follow their own way to parse the code, IE6 the following will be the choice of IE box model, Other modern browsers are using the box model.

Because browsers in the following versions of IE6 do not follow the Web standard, regardless of the beginning of the page there is no DTD declaration, it is according to the IE Box Model parsing code.

CSS Box model