box-sizing: border-box 有什么作用？

Question

Accepted Answer

`box-sizing` 控制 **`width` 和 `height` 属性实际测量的内容**。默认值（`content-box`）仅测量内容；`border-box` 使其包括内边距和边框。

## 默认值（content-box）的问题

```css
.box {
  box-sizing: content-box; /* the default */
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200 + 2×20 + 2×5 = 250px  ← bigger than you asked for! */
```

使用 `content-box` 时，内边距和边框会被 **添加到** `width` 之外，所以元素最终宽度会超过你设置的数字。这会破坏布局：一个 `width: 50%` 的盒子加上内边距会溢出其 50% 的容器。

## 解决方案：border-box

```css
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
```

使用 `border-box` 时，`width` 就是 **最终** 渲染宽度 — 内边距和边框从内部扣除。你设置的数字就是你得到的大小，这要直观得多。

## 通用重置

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

几乎所有现代样式表、框架和重置都会全局应用这个属性。它使尺寸更加可预测：`width: 50%` + 内边距保持恰好 50% 宽，两个 `width: 50%` 的盒子可以并排放置而不会溢出，等等。

## 为什么这很重要

`border-box` 消除了最常见的布局计算问题 — 不必为每个宽度都在心里加上内边距和边框。

将其全局设置被认为是最佳实践，因为"我设置的宽度就是我得到的宽度"这才是你自然期望的尺寸行为。