box-sizing

摘要

box-sizing 属性用于更改用于计算元素宽度和高度的默认的CSS盒模型。可以使用此属性来模拟不正确支持CSS框模型规范的浏览器的行为。

使用方式

/* 关键字值 */
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”前缀。