CSS 盒模型

理解 CSS 中元素大小和间距的工作原理。

一切皆为盒

在 CSS 布局中，每个 HTML 元素都被视为一个矩形盒子。“盒模型”(box model) 描述了构成这个盒子并影响其在页面上总体大小和间距的组件。

CSS 盒模型由几个层次组成：

内容 (Content)： 元素的实际内容（文本、图像等）。其尺寸（默认情况下）由 width 和 height 定义。
内边距 (Padding)： 内容周围、边框内部的透明空间。由 padding 属性（padding-top、padding-right 等）控制。
边框 (Border)： 绘制在内边距和内容周围的线条。由 border 属性（border-width、border-style、border-color）控制。
外边距 (Margin)： 边框外部的透明空间，用于将此盒子与其他元素隔开。由 margin 属性（margin-top、margin-right 等）控制。

可视化各层次（从内到外）：

-------------------------------------
| Margin                      |
|   -------------------------   |
|   | Border                |   |
|   |   -----------------   |   |
|   |   | Padding       |   |   |
|   |   |   -----------   |   |   |
|   |   |   | Content |   |   |   |
|   |   |   -----------   |   |   |
|   |   -----------------   |   |
|   -------------------------   |
-------------------------------------

元素宽度和高度计算（默认行为）

至关重要的是，默认情况下（当 box-sizing 为 content-box 时），您在 CSS 中设置的 width 和 height 属性仅应用于内容区域。

要计算一个元素在水平方向占据的总空间，您必须将内容宽度、左/右内边距、左/右边框以及左/右外边距相加：

Total Width = width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right

类似地，对于总垂直空间：

Total Height = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom

计算示例：

考虑以下 CSS：

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 5px solid navy;
  margin: 10px;
}

该元素在页面上占据的总宽度为：

300px（宽度）+ 20px（左内边距）+ 20px（右内边距）+ 5px（左边框）+ 5px（右边框）+ 10px（左外边距）+ 10px（右外边距）= 370px

该元素在页面上占据的总高度为：

150px（高度）+ 20px（上内边距）+ 20px（下内边距）+ 5px（上边框）+ 5px（下边框）+ 10px（上外边距）+ 10px（下外边距）= 230px

这种默认计算方式可能不太直观——增加内边距或边框会增加元素的整体尺寸，可能破坏布局。

更好的方法：box-sizing: border-box

现代 CSS 提供了一种更直观的方式来处理盒模型，使用 box-sizing 属性。

设置 box-sizing: border-box; 会改变计算方式：现在，width 和 height 属性定义的是包含内容、内边距和边框的总宽度/高度。外边距仍像以前一样额外计算。

使用 box-sizing: border-box; 时：

您设置的 width 是最终渲染出的宽度，包括内边距和边框。
您设置的 height 是最终渲染出的高度，包括内边距和边框。
内边距和边框的值会从内容区域向内挤压。
外边距仍然在边框外部添加空间。

border-box 示例：

.box-borderbox {
  box-sizing: border-box; /* 改变盒模型的计算方式 */

  width: 300px; /* 这现在是总宽度，包含内边距/边框 */
  height: 150px;
  padding: 20px;
  border: 5px solid green;
  margin: 10px;
}

现在，边框边缘占据的总宽度恰好是 300px。内部内容区域会自动收缩，以适应 20px 内边距（左+右 = 40px）和 5px 边框（左+右 = 10px），从而为实际内容留下 300 - 40 - 10 = 250px 的空间。

包含外边距的总空间是 300px + 10px（左外边距）+ 10px（右外边距）= 320px。

最佳实践：强烈建议普遍应用 box-sizing: border-box; 以使布局计算更简单、更可预测。这通常通过以下规则实现：

html {
  box-sizing: border-box;
}

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

这确保了当您设置 width: 300px 时，元素（包括其内边距和边框）的总宽度将为 300px。

注意：提及的关于 Internet Explorer 8 及更早版本的旧兼容性问题，在现代 Web 开发中已不再相关。当存在正确的 <!DOCTYPE html> 声明时（应始终如此），所有当前浏览器都能正确支持默认的 content-box 和 border-box 值。

延伸阅读：MDN CSS 盒模型介绍和 MDN box-sizing 属性。