The box model and the Width calculation method of box model in the detailed CSS

CSS assumes that all HTML document elements generate a rectangular element (element box) that describes the space occupied by the element in the HTML document layout, which can be visualized as a box. CSS creates a "box model" concept around these boxes.

box model, in effect, is to see some of the label elements as a box. The distance between the box and the other box is the outermost of the box, which is not an edge but a space that is added outside the border. This margin makes it unnecessary for the element boxes to be tightly connected, which is an important means of CSS layout. The margin (margin) attribute is used to indicate that the margin-top,margin-right,margin-bottom,margin-left can be interpreted as the distance of the box from the four directions of the outside box. The box itself border thickness, uses the border property to represent, generally can set its color, the width, the dashed line and so on; the object in the box is the content, which itself has a width (weight), a height, and the object and the box have a certain distance, This distance is padding (inner margin), with Padding-top,padding-left,padding-right,padding-bottom. This is the box model that I simply understand.

In the debugging, according to the color is very good to see how many of these parts, exactly where is the location? Using Google debugging Example: the orange * * * * * * is the element set by the margin attribute value; this figure is: margin:20px auto; The result:

is the border property value set by this element.

The green part of the lotus leaf is the padding value of this element, up and down 15px, about 25px

The blue representation is the height of the object itself. weight:300px; height:300px;

The width of the corresponding box model is equal to margin-left+margin-right+border-left+border-right+padding-left+padding-right+width; The height is also corresponding to the internal and external margins and border.

The Box-sizing attribute is presented in the new CSS3. When you use the Box-sizing property value, you can better and more easily select whether to specify the width value, the Height property, and the height value of the element, and the width of the inner and outer margins of the elements, and the widths of the borders, respectively. In general, the Box-sizing attribute value is used to control the total width height of the element.

This property contains:

Content-box,border-box;

The default is Content-box, and the width and height are applied to the element's content box, respectively. Draws the inner margin and border of the element outside the width and height. Box model width, Height calculation method and the same as above,

However, when set to Border-box, the width and height of the element set determines the bounding box of the element. The inner and outer margins of this box do not increase its width. That is, any padding and borders specified for the element will be drawn within the set width and height.