box-sizing -css

box-sizing盒子模型 box-sizing属性用于更改用于计算元素宽度和高度的默认的CSS盒子模型。

关键字 值

box-sizing: content-box;
box-sizing: border-box;

全局 值

box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

content-box

默认值，标准盒子模型。width和height只包括内容区的宽和高，不包括padding、border和margin。

如 .box{width: 500px;} {border:10px solid black} 那么在浏览器中渲染的实际宽度是520px。

border-box

width和height属性包括内容、padding和border。

内容区实际宽度是width减去border+padding的计算值。