CSS 盒模型

在 CSS 中，每个元素都被看作一个方形的盒子（box）。理解盒模型是掌握 CSS 布局的基础——它决定了元素的尺寸计算、间距和边框行为。

盒模型的四层结构

从内到外，每个 CSS 盒子由四部分组成：

plaintext

+----------------------------+
|         margin             |  ← 外边距（盒子与盒子之间的距离）
|   +--------------------+   |
|   |      border        |   |  ← 边框（盒子的边界线）
|   |   +------------+   |   |
|   |   |  padding   |   |   |  ← 内边距（内容与边框之间的留白）
|   |   | +--------+ |   |   |
|   |   | |content | |   |   |  ← 内容区（文字、图片）
|   |   | +--------+ |   |   |
|   |   +------------+   |   |
|   +--------------------+   |
+----------------------------+

content — 元素的实际内容（文字、图片等）
padding — 内边距，内容与边框之间的空白
border — 边框，包裹在内边距外面
margin — 外边距，盒子与其他元素之间的距离

标准盒模型（content-box）

默认情况下，width 和 height 只设置内容区的尺寸：

css

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid #2563eb;
  margin: 30px;
}

在这个例子中：

内容宽度：300px
实际占据宽度：300 + 20×2 + 5×2 = 350px（不含 margin）
加上 margin 后占位：350 + 30×2 = 410px

盒子在页面上的实际可视宽度是 300 + 40 + 10 = 350px。

替代盒模型（border-box）

box-sizing: border-box 改变了尺寸计算方式——width 包含了内容、内边距和边框：

css

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

这个重置在几乎所有现代项目中都是标准配置。使用 border-box 后：

css

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 5px solid #2563eb;
}

设置的总宽度：300px
内容区自动缩减：300 - 20×2 - 5×2 = 250px

border-box 让尺寸设置更直观——你设置 width: 300px，盒子的最终宽度就是 300px，不需要手动扣除 padding 和 border。这是为什么几乎所有 CSS 框架和 reset 都会全局设置它的原因。

两种盒模型对比

css

.element {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #2563eb;
}

.content-box .element {
  box-sizing: content-box; /* 默认 */
  /* 可视宽度 = 200 + 20×2 + 5×2 = 250px */
  /* 可视高度 = 100 + 20×2 + 5×2 = 150px */
}

.border-box .element {
  box-sizing: border-box;
  /* 可视宽度 = 200px（内容被压缩为 150px） */
  /* 可视高度 = 100px（内容被压缩为 50px） */
}

html

<div class="content-box">
  <div class="element">content-box（可视宽 250px）</div>
</div>
<div class="border-box">
  <div class="element">border-box（可视宽 200px）</div>
</div>

margin 叠加（Margin Collapse）

垂直方向上，相邻盒子的外边距会叠加（取最大值而不是求和）：

html

<div class="box1">盒子 1，margin-bottom: 30px</div>
<div class="box2">盒子 2，margin-top: 20px</div>

这两个盒子之间的间距是 30px（取 30 和 20 中的较大值），而不是 50px。

margin 叠加只在垂直方向发生，水平方向不会叠加。叠加规则适用于相邻兄弟元素、父子元素（如果父子间没有 border/padding 阻隔）以及空元素。

盒模型与浏览器 DevTools

所有浏览器的开发者工具都能直观展示盒模型。在 Elements 面板选中一个元素后，在 Styles/Computed 标签旁可以看到四层彩色示意图（蓝色=内容、绿色=内边距、黄色=边框、橙色=外边距）。这是调试布局问题最有效的工具。