Box-sizing properties of boxes in CSS3

Box-sizing

Properties

box-sizing property 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.

box-sizing:content-box (default) | Border-box;

content-box

Default value, standard box model. Width and height include only the width and height of the content, excluding the border (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  

Width and height include padding (padding) and border (border), excluding margin (margin).

This is the box model used by IE quirks mode (Quirks modes). Note: The padding and borders will be included in the box at this time.

like .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.

Demo

<! DOCTYPE html>{/*the value of padding border is included when calculating Height,width*/-webkit-box-sizing:Border-box;-moz-box-sizing:Border-box;box-sizing:Border-box;/*padding is not included when calculating height,width border*/            /*-webkit-box-sizing:content-box;*/            /*-moz-box-sizing:content-box;*/            /*Box-sizing:content-box;*/            /*the value of padding is included when calculating Height,width *!/*/            /*-webkit-box-sizing:padding-box;*/            /*-moz-box-sizing:padding-box;*/            /*Box-sizing:padding-box;*/Background-color:Gray;Border:10px Orange Solid;width:500px;Height:300px; }</style>

Link ...

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

Box-sizing properties for boxes in CSS3