Css3: box Model and box-sizing attributes, css3box-sizing

Css3: box Model and box-sizing attributes, css3box-sizing

Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size and attributes, such as the color, background, and border of the rendering engine, and the location of these boxes. In CSS, these rectangular boxes are described using the standard box model. This modelSpace occupied by an element. Each box has four borders: the outer margin boundary margin, the border Boundary border, the inner margin boundary padding, And the content boundary.

 

• In W3C 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

Introduced in CSS3Box-sizingAttribute, which allows you to change the calculation method of the default CSS Box Model for element width.

There are two options:

• Content-box: Standard box model. The width and height defined by CSS only contain the width and height of content. (Default)

• Border-box: IE box model. The width and height defined by CSS include content, padding, and border.

 

Instance:

(Con1 is set to box-sizing: border-box, and con is the default content-box)

 1 
 
The differences between the two boxes can be clearly seen on the console.
The box model of the first div is as follows: content-box

 
The box model of the second div is as follows: border-box