CSS3 盒模型尺寸

CSS Box Sizing

理解盒模型计算

box-sizing 属性定义了如何计算元素的总宽度和总高度，其中包括其内容区（content）、内边距（padding）和边框（border）。

浏览器支持

box-sizing 属性已获得所有现代浏览器的广泛支持。通常不再需要使用供应商前缀。

属性	Internet Explorer	Chrome	Firefox	Safari	Opera
box-sizing	IE 8+	Chrome	Firefox	Safari	Opera

默认行为：box-sizing: content-box

默认情况下，浏览器使用 content-box。这意味着你设置的 width 和 height 属性仅应用于元素的内容区域。内边距（padding）和边框（border）会额外增加到该宽度和高度之外。

计算方式：实际宽度 = width + padding-left + padding-right + border-left + border-right 实际高度 = height + padding-top + padding-bottom + border-top + border-bottom

这通常会导致元素看起来比预期的要大，尤其是在添加了内边距或边框时。

考虑两个 Div 元素，它们的 width 都设置为 300px，height 都设置为 100px。Div 2 额外设置了 padding: 50px。

Div 1 (宽度: 300px, 高度: 100px, 无内边距): [显示为 300px 宽]

Div 2 (宽度: 300px, 高度: 100px, 内边距: 50px): [显示为 400px 宽 (300 + 50 + 50)]

上例使用的 CSS (content-box 是默认值)：

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  /* box-sizing: content-box; (默认值) */
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  /* box-sizing: content-box; (默认值) */
}

历史上，开发者必须手动从期望的总宽度中减去内边距和边框的宽度，这很容易出错。

现代最佳实践：box-sizing: border-box

border-box 值使布局变得直观得多。当你为一个元素设置 box-sizing: border-box; 时，width 和 height 属性定义的是元素的总尺寸，包含内容区、内边距和边框。

计算方式：width = 内容区 + 内边距 + 边框 height = 内容区 + 内边距 + 边框

现在，如果我们对上例中的两个 Div 应用 border-box：

Div 1 (宽度: 300px, 高度: 100px, border-box): [显示为 300px 宽]

Div 2 (宽度: 300px, 高度: 100px, 内边距: 50px, border-box): [也显示为 300px 宽！内容区会相应缩小以容纳内边距。]

使用 border-box 的 CSS：

.div1-bb {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2-bb {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

因为 border-box 使用起来要简单得多，所以将其应用于页面上的所有元素是一个普遍的最佳实践，可以使用一个通用选择器来实现。

推荐的全局设置：

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* 使所有元素继承自 html */
}

这个设置确保了所有元素尺寸的一致性和可预测性，包括表单元素，它们有时在不同浏览器中有不一致的默认 box-sizing。