CSS box models (box model)

Read Catalogue

1. What is a CSS box model

2. IE box model and box model

3. CSS3 Property box-sizing

4. About the use of box models

In the initial contact with CSS, the CSS box model is not known, hit many times the south wall ah. The box model is the basis for the layout of the Web page, which makes the elements appear on the page and, if mastered enough, it is much easier to use the CSS layout.

1. What is a CSS box model

Box model, as the name implies, is a box. The box in life has a long, wide height, and the box itself has a thickness that can be used to load things. The box model on the page we can understand a plan from the top of the box, the contents of the box, equivalent to the content of the box model, the gap between the thing and the box, understood as the inner margin of the box model (padding), the thickness of the box itself, is the box model border (border), outside the box and the other boxes between the spacing, is the box margin (margin).

The element's margin (margin), border (border), padding (padding), content (contents) form the CSS box model.

Figure 1. Box model

2. IE box model and box model

CSS box model is divided into IE box model ( Figure 2) and the box model ( Figure 3). In fact, the IE box model is the box model under the Quirks mode, and the box model is the model under the Standard Model (standards mode).

IE6 and its later versions, and now all standard browsers follow the box model, IE6 the following versions of browsers follow the IE box model.

Figure 2. IE Box model

Figure 3. Box Model

From the intuitive, it can be seen that the width or height of the IE box model is calculated as:width/height = content + padding + border, the width or height of the box model is calculated as follows:width/height = Content.

To give a simple example: a DIV has a width and height of 100px, a padding of 10px, a border of 5px, and an outer margin of 30px. Figure 4 shows the results under the different models, the total width and total height (including margin, border, padding, content) of the Div displayed under the model is the total width and total height of the div shown under the 145px,ie box model (including margin , border, padding, content) is + 130px. The obvious difference is that if the width of the element is certain, the width of the model is not including the inner margin and the border, ie box mold includes.

The code is as follows:

<style>. Content{background:#eee;Height:Auto;Border:1px solid Blue;}. Div{width:100px;Height:100px;margin:30px;padding:10px;Border:5px Solid Blue;}. div-01{background:Orange;}. div-02{background:Yellow;box-sizing:Border-box;}</style>

<Divclass= "Content">  <Divclass= "Div div-01">Div01</Div>  <Divclass= "Div div-02">Div02</Div></Div>

The page works as follows:

Figure 4. Difference

3. 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.

4. About the use of box models

There is no one like me, think property box-sizing is really a good thing, just set all the elements of this property for Content-box or border-box, to satisfy their habits.

Although the current browser is compatible with this property (such as), or just in case, it is best to temporarily add -webkit- and -moz- prefixes before attributes.

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

In, we see the IE compatibility attribute box-sizing must be 8 or higher version, other browsers can automatically upgrade, compatibility is not worried, if it is IE7, IE6 or lower version, how to do? Also, if we don't use this property, what kind of box model does the browser choose?

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, the 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 models (box model)