Box-sizing attributes that are not widely adopted

The width and height set in the standard box model are only the width and height of the content, but if you set the width and height of the border, margin, padding and so on, there will be overflow phenomenon, so the box model needs to be changed.

box-sizingproperty is used to change the way the default CSS box model calculates the width of the element. This property can be used to simulate the performance of browsers that do not correctly support the standard box model.

1, the value

• content-box

Default value, standard box model. widthwith height only the width and height of the content, excluding borders (border), padding (padding), margin (margin). Note: The padding, borders & margins are outside the box. Like what. If. box {width:350px}; and {border:10px solid black;} then the actual width of the rendering in the browser will be 370px;

Dimension Calculation formula: Width = content, height = content. Both width and height do not contain the content's border (border) and padding (padding).

• border-box (In fact, Box-sizing:border-box is using the box model in the weird mode to calculate the width and height).

　　widthWith the include padding ( height padding) and border (border), excluding margin (margin). This is the box model used by IE quirks mode (Quirks modes). Note: Margins and borders will be included in the box at this time. For example, .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px if the calculated internal content is negative, it will be calculated as 0 and the content is still there, so it is not possible to hide the element through Border-box.

Dimension Calculation formula: Width = border + padding + content widths, height = border + padding + content height.

2, browser support situation

　　支持目前的所有Firefox, Chrome, Safari, Opera版本的浏览器以及 IE8+以上的IE浏览器

Box-sizing attributes that are not widely adopted