CSS3 box model and Box-sizing properties Learn

Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size, attributes-such as its color, background, border-and the location of the boxes. In CSS, these rectangular boxes are described using a standard box model. This model describes the space occupied by an element。 Each box has four boundaries: margin margins, border boundaries border, padding boundaries padding and content boundaries.

In the model: total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

In the IE model: total width = margin-left + width + margin-right

The box-sizing attribute is introduced in CSS3, which allows to change the way the default CSS box model computes the width of the element.

The total includes two options:

Content-box: Standard box model, CSS defines a wide height that contains only the width and height of the content. Default

Border-box:ie box model, CSS definition of the wide height includes content,padding and border

Instance:

(Con1 is set to Box-sizing:border-box,con as the default Content-box)

The difference between two boxes can be seen at a glance at the console

The box model for the first P is as follows: Content-box


The box model for the second p is as follows: Border-box


The above is a small series for everyone to bring the CSS3 box model and Box-sizing properties of the full understanding of all the content, I hope that we have help, a lot of support topic.alibabacloud.com~