box-sizing

CSS 中的 box-sizing 属性控制如何处理它应用于的元素的 盒子模型。

.module {
  box-sizing: border-box;    
}

使用它的更常见方法之一是将其应用于页面上的所有元素，包括 伪元素。

*, *::before, *::after {
  box-sizing: border-box;
}

这通常被称为“通用盒子大小”，它是一种很好的工作方式！ 您设置的（字面上的）width 就是您获得的宽度，无需进行心理运算和管理来自多个属性的宽度带来的复杂性。 我们甚至有 一个盒子大小意识日 围绕这里。

值

• content-box: 默认值。 宽度和高度值仅适用于元素的内容。 填充和边框添加到框的外部。
• padding-box: 宽度和高度值适用于元素的内容及其填充。 边框添加到框的外部。 目前，只有 Firefox 支持 padding-box 值。
• border-box: 宽度和高度值适用于内容、填充和边框。
• inherit: 继承父元素的盒子大小。

示例

此示例图像将默认的 content-box（顶部）与 border-box（底部）进行比较

图像之间的红线代表元素的宽度值。 请注意，具有默认 box-sizing: content-box; 的元素在将填充和边框添加到内容框的外部时会超出声明的宽度，而应用了 box-sizing: border-box; 的元素完全适合声明的宽度内。

使用盒子大小

假设您将元素设置为 width: 100px; padding: 20px; border: 5px solid black;。 默认情况下，生成的框宽度为 150px。 这是因为默认的盒子大小模型是 content-box，它仅将元素的声明宽度应用于其内容，并将填充和边框放置在元素框的外部。 这实际上会增加元素占用的空间量。

如果将 box-sizing 更改为 padding-box，填充将被推入元素框内部。 然后，框将是 110px 宽，内部有 20px 的填充，外部有 10px 的边框。 如果您想将填充和边框都放到框内，可以使用 border-box。 然后，框将是 100px 宽 - 10px 的边框和 20px 的填充都被推入元素框内部。

演示

更多信息

• CSS-Tricks 关于 盒子大小 的文章
• CSS-Tricks 关于 继承盒子大小 的文章
• MDN 文档
• Paul Irish 关于普遍使用 border-box

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任何 *†	3 *†	1 ‡	7 *	8 *	2.1 *†	任何 *

* 不支持 padding-box

† 较旧的版本需要 -webkit 前缀（Chrome 1-9、Safari 3-5、Android 2.1-3.x）

‡ 直到版本 28 需要 -moz 前缀，从版本 29 开始无需前缀。

相关