4. 盒模型

这是什么：盒模型 = 每个元素都有的四层矩形：content（内容）、padding（内边距）、border（边框）、margin（外边距）。

为什么用：页面上每个元素都是一个矩形盒子，理解盒子就理解了「为什么它宽了、挤了、有空隙」——算不清这四层，宽度永远对不上。

如何用：先看四层结构的示意图，再用一条带 width 和 padding 的规则亲手算一次盒子的总宽。

4.1 四层结构

从里到外依次是：

| margin  ← 盒子之间的距离（透明）       |
| border  ← 边框                         |
| padding ← 内容到边框的留白（同背景色） |
| content ← 内容（文字、图片）           |

一句话分工：

content：放内容本身
padding：内边距，内容与边框之间的「肚子里空气」
border：边框，看得见
margin：外边距，盒子与别的盒子之间的「社交距离」

4.2 一个完整示例

.box {
  width: 200px;
  padding: 20px;
  border: 4px solid steelblue;
  margin: 16px auto;
}

你会看到：200px 宽的内容，包着 4px 的蓝边框，四周 20px 的留白，盒子在文档中占位 200 + 20×2 + 4×2 = 248px 宽。

4.3 四方向的简写

padding 和 margin 支持简写，按上、右、下、左顺时针记：

padding: 10px;              /* 四边都 10px */
padding: 10px 20px;         /* 上下 10，左右 20 */
padding: 10px 20px 30px;    /* 上 10、左右 20、下 30 */
padding: 10px 20px 30px 40px;/* 上右下左，顺时针 */

单独指定某一边：margin-top: 0;、padding-left: 8px;。

4.4 box-sizing：算宽度的方式

默认规则下，width 只指 content，加 padding 后盒子悄悄变宽，很反直觉：

.box { width: 200px; padding: 50px; } /* 实际占 300px！ */

解决方案，box-sizing: border-box——width 直接算到边框为止：

* {
  box-sizing: border-box; /* 全站统一，业界事实标准 */
}

开发第一步先加这条通配规则：之后说 width: 200px，就真的 200px，padding 收进框内。

4.5 常见坑

margin 叠加：上下相邻块元素的 margin 不相加，取较大值（10px 和 20px 相邻 → 间隔 20px）
margin 不会继承，padding 也不会；但字体、颜色会继承，留意别混
子元素 margin-top 会把父元素一起推下去，模式叫 margin 穿透——给父元素加 overflow: hidden; 或用父元素 padding 代替

4.6 动手改

给 .box 改 box-sizing: border-box 后再改 padding，观察盒子总宽不变
写两个盒子，只用 margin-bottom 控制间距
故意把上/下 margin 设成 10 和 30，验证「取大值」

4.7 小结

盒子四层：content → padding → border → margin
简写按顺时针：上、右、下、左
全站先加 box-sizing: border-box，宽度就不会「越算越宽」

下一章：布局：display 与定位 🐸