摘要
box-sizing 属性用于更改用于计算元素宽度和高度的默认的CSS盒模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。
| key | value |
|---|---|
| 初始值 | content-box |
| 适用元素 | 任何可设置width和height的元素 |
使用方式
/* 关键字值 */
box-sizing: content-box;
box-sizing: border-box;
/* 全局值 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
/* 为兼容旧版浏览器，需要加上前缀 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
说明
- content-box
content-box 是Chrome、Firefox等现代浏览器的缺省值，采用标准的盒子模型计算方式。在计算中，元素的 width 和 height 将只包含内容的宽和高，而不包括边框、内边距、外边距的宽度。
即，在content-box中，border、padding、margin都在盒子模型之外。
举个栗子：
.box {
width: 100px;
border: 10px solid #000;
}
上述样式在浏览器中实际渲染的宽度将是 120px。
- border-box
border-box 是 IE 的缺省值，及所谓的“怪异模式”。在浏览器渲染时，会将边框、内边距、外边距与内容宽高一同计算。
即，在border-box中，border、padding、margin都在盒子模型中。
依然是上面的栗子：
.box {
width: 100px;
border: 10px solid #000;
}
此时上述样式在浏览器中实际渲染的宽度将是 100px。
需要注意的是，当设置了border-box后，内容框的宽度不可为负数。
计算公式为：
实际渲染的 width = border + padding + 内容的 width，
实际渲染的 height = border + padding + 内容的 height。
一个“没用”的值
- padding-box
该可选值只有Firefox实现，并且Firefox在Firefox 50之后移除了该可选值。
兼容性
在这些浏览器中可以使用：
IE 8+、EDGE、Chrome、Firefox、Opera 7+、Safari
在较新的浏览器中，浏览器厂商已经移除了“-webkit”前缀。
