CSS Box model

CSS has a basic real-world pattern called box model, which defines how elements in a Web page are interpreted as boxes.

1. Introduction to CSS Box model

There are several box models in CSS: inline, inline-block,block, table, absolute position, float.

The browser sees each element as a box model, and each box model is determined by the following combinations of attributes: display, position, float, width, height, margin, padding, and border, etc. Different types of box models produce different layouts.

The box model of the standard

Outer box Dimension calculation

Element space height = content height (height) + padding (padding) + border (border) + margin (margin)

Element space width = content width (width) + padding (padding) + border (border) + margin (margin)

Inner box size

Element height = content Height (height) + padding (padding) + border (border)

Element width = content width (height) + padding (padding) + border (border)

2. CSS3 Box model

The CSS3 box model adds a box model attribute box-sizing, which defines the dimensional resolution of the box model in advance, with the following syntax: Box-sizing:content-box | Border-box | Inherit

Box-sizing:content-box; The default value, which allows elements to maintain the standard box model. The width and height of the element (width, height) equals border+padding+height/width

Box-sizing:border-box; This value will redefine the pattern in the css2.1 box model, allowing elements to maintain the traditional IE box model (IE6 the following versions and Ie6~7 's quirks). The width height of the element is equal to the width of the content of the element

Box-sizing:inherit; This value causes the element to inherit the box model pattern of the parent element;

The box-sizing attribute is mainly used to control the parsing mode of the element's box model, whose main purpose is to control the total width of the element. In the box-sizing, the default attribute value of the element is the Content-box value, and if the property value is not displayed box-sizing the property value is Border-box, you can explicitly set a total width for the element. In this case, the layout of the page is more convenient.

IE6 below and in the strange mode of IE browser box model although does not conform to the standard specification, but this analytic way is not useless, it also has a good aspect, no matter how to repair the elements of the border or the size of the inner margin, will not affect the overall size of the box, it will not disrupt the overall layout of the page. In the standard browser, according to the specification of the box model analysis, once modified the element's border or the padding, it will affect the size of the element box, thus affecting the layout of the entire page.

CSS Box model