box-sizing 属性决定了浏览器如何计算一个元素的总宽度和总高度。

简单来说，它决定了你设置的 CSS width 和 height 属性是否包含 内边距 (padding) 和 边框 (border)。

以下是 content-box 和 border-box 的详细对比：

1. content-box (默认值)

这是 CSS 的标准盒模型（W3C 标准）。当你设置 width 时，你设置的仅仅是内容区域的宽度。

• 含义：宽度和高度 不包含 padding 和 border。
• 计算公式：
  • 元素实际占用的总宽度 = width + padding + border
  • 元素实际占用的总高度 = height + padding + border
• 现象：如果你给一个元素设置了宽度，然后又增加了 padding，这个元素在页面上看起来会变大（向外扩张）。

举例：

div {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
}

• 最终渲染宽度 = 100 + 20 (左右padding) + 10 (左右border) = 130px。

2. border-box (推荐使用)

这是现代网页开发中最常用的模式（也就是以前 IE 的怪异盒模型）。当你设置 width 时，你设置的是整个盒子的宽度。

• 含义：宽度和高度 包含 了 padding 和 border。
• 计算公式：
  • 元素实际占用的总宽度 = width
  • 内容区域的可用宽度 = width - padding - border
• 现象：如果你给一个元素设置了宽度，然后增加了 padding，这个元素的总大小保持不变，但内部的内容区域会被压缩（向内收缩）。

举例：

div {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid black;
}

• 最终渲染宽度 = 100px。
• 内容区域宽度 = 100 - 20 (左右padding) - 10 (左右border) = 70px。

图解对比

假设 CSS 设置：width: 100px; padding: 10px; border: 5px;

为什么现在的开发者都喜欢用 border-box？

使用 content-box 进行布局非常痛苦。比如你想让两个 div 各占 50% 的宽度并排显示：

1. 设置 width: 50%。
2. 如果你给它们加了 padding: 20px 或者 border: 1px。
3. 在 content-box 下，实际宽度变成了 50% + 40px，两个 div 加起来超过了 100%，导致第二个 div 被挤到下一行。

而在 border-box 下，width: 50% 就是最终宽度，无论你怎么加 padding 和 border，它们永远各占一半，布局非常稳定。

最佳实践：
通常在项目的全局 CSS Reset 中，我们会加上这段代码：

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