CSS 盒子模型

在 CSS 中，每个元素都被视为一个矩形盒子。这个盒子从内到外由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。理解盒子模型是控制布局和间距的基础。

盒子的四层结构（从内到外）

┌─────────────────────────────────────┐
│  margin（外边距）                     │
│  ┌───────────────────────────────┐   │
│  │  border（边框）                │   │
│  │  ┌─────────────────────────┐  │   │
│  │  │  padding（内边距）       │  │   │
│  │  │  ┌───────────────────┐  │  │   │
│  │  │  │  content（内容）   │  │  │   │
│  │  │  │  文字、图片等      │  │  │   │
│  │  │  └───────────────────┘  │  │   │
│  │  └─────────────────────────┘  │   │
│  └───────────────────────────────┘   │
└─────────────────────────────────────┘

• Content（内容区）：由 width、height 控制（对块级元素而言），放文字、图片等。
• Padding（内边距）：内容与边框之间的空白，见 CSS padding。
• Border（边框）：围绕在 padding 外的一圈线，见 CSS Border。
• Margin（外边距）：盒子与其它元素之间的空白，见 CSS margin。

---

元素「占用的空间」怎么算？

一个元素在页面上总共占用的宽度可以理解为：

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

高度同理。所以当你设 width: 200px 时，若还有 padding、border，可见盒子的总宽度会大于 200px，布局时要注意这一点。

---

标准盒模型（content-box，默认）

在标准盒模型下：

• 你设置的 width、height 只表示内容区的宽高。
• padding、border 会加在 width/height 之外，所以元素实际占用的空间 = 内容 + padding + border + margin。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

• 内容区：200px × 100px
• 实际占用宽度：20 + 5 + 200 + 5 + 20 + 10×2 = 270px（左右 margin 各 10px）

---

替代盒模型（border-box）

若使用 box-sizing: border-box：

• width、height 表示的是「内容 + padding + border」的总和（即可见盒子的宽高）。
• 再设 padding、border 时，会从这个总宽高里「往里挤」，内容区会变小，但元素总占位不变（不含 margin）。

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

此时整个盒子（含 padding、border）宽度就是 200px，内容区宽度 = 200 - 202 - 52 = 150px。

很多项目会全局设置：

* {
  box-sizing: border-box;
}

这样布局时更容易心里有数：「设多宽就是多宽」（不含 margin）。

---

小结

• 盒子从内到外：content → padding → border → margin。
• 标准盒模型（content-box）：width/height 只管内容区；padding、border 会加大总占位。
• border-box：width/height 包含 padding、border，布局更直观，常用 * { box-sizing: border-box; }。

下一节我们详细看 CSS Border（边框）。