盒模型 — 每个元素都是四层盒子Copy Anchor Link

这一章回答两类最常见的布局疑问: 「我明明写了 50% 宽,两个盒子怎么还挤不到一行」 「两个 20px 的外边距之间为什么只有 20px 的空」。 两个问题的答案都是盒模型:元素的实际占地,从来不止 width 一个数。

1. 这一章在全书链条里的位置Copy Anchor Link

选择器(02)解决选谁,层叠(03)解决谁生效。这一章讲「生效之后,元素到底占多大地方」—— 这是布局的地基,第 05 章(display、定位)、第 06/07 章(Flex、Grid)全建在它的概念上。 不理解盒模型,后面所有「对齐」「间距」「居中」的讲解都会悬空。

2. 顶层全景:四层盒子剖面Copy Anchor Link

        ┌─────────────── margin ────────────────┐
        │  ┌──────────── border ────────────┐   │
        │  │  ┌──────── padding ─────────┐  │   │
        │  │  │                          │  │   │
        │  │  │        content           │  │   │
        │  │  │     (文字、图片)        │  │   │
        │  │  │                          │  │   │
        │  │  └──────────────────────────┘  │   │
        │  └────────────────────────────────┘   │
        └───────────────────────────────────────┘

图说:margin 推别人,border 画线,padding 撑自己,content 装内容。
背景色铺到 padding 为止,铺不进 margin。

书里那句话是本章的地基:「CSS 里每个 HTML 元素都被视为一个矩形盒子」, 布局的全部计算都在这个盒子上发生¹。四层各自的职责:

顺带一个马上要用的事实:背景色和背景图会铺到 padding,但在 margin 处戛然而止²—— 「卡片底色和边框之间有留白」的效果,就是 padding 在起作用。

3. 核心原理:宽度到底怎么算Copy Anchor Link

主线例子:一个 200px 的盒子,实际多宽Copy Anchor Link

输入:

.modern-box {
  box-sizing: border-box;   /* 先押后讲,先看不带它的版本 */
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

默认算法(content-box):width: 200px 只管内容层。 内边距(左右各 20)和边框(左右各 5)在 200 之外另加: 实际占地 = 200 + 20 + 20 + 5 + 5 = 250px³。 这就是书里叫「计算缺口」(The Calculation Gap) 的坑:补了内边距和边框, 元素就比声明的宽度更宽⁴。

这个缺口在「百分比布局」上最毒:两个盒子各写 width: 50%,再各加一点 padding, 加起来就超过 100%,第二个盒子被挤到下一行——书里把它列为布局「破碎」的第一大原因⁵。

border-box 算法:box-sizing: border-box 把 width 的定义改成 「含内容 + 内边距 + 边框的总宽」。同样这行 200px,内容层自动收缩成 200 − 20 − 20 − 5 − 5 = 150px,总宽死死咬住 200px⁶。

声明 width: 200px + padding 20px + border 5px

content-box(默认)   │████ 内容 200px ████│20│5│   总宽 250px
border-box          │██ 内容 150px ██│20│5│        总宽 200px

图说:border-box 让「宽度」重新等于直觉里的宽度。数字与原书示例一致。

一条起手式统治所有现代项目Copy Anchor Link

把 border-box 施加给一切元素,是行业事实标准:

* {
  box-sizing: border-box;
  margin: 0;
}

通配选择器 * 选中每个元素(第 02 章),一行解决全站。 margin: 0 顺手把浏览器自带的默认外边距清掉——h1、p 们「自带的空白」就是它们。

简写:四个值按顺时针背Copy Anchor Link

padding: 5px 10px 15px 20px; 四个值按上、右、下、左(顺时针)分配; 省略有固定规则:

margin 同一条规则。记不住的背法:从上开始顺时针,缺的与对边相同。

外边距折叠:两个 20 不等于 40Copy Anchor Link

这是盒模型里最反直觉的一条。两个上下相邻的元素:

.box1 { margin-bottom: 20px; }
.box2 { margin-top: 20px; }

直觉上它们之间该有 40px 空隙。实际只有 20px:浏览器把两个垂直外边距 「折叠」成一个,取较大的那个⁷。左右方向不折叠;Flex/Grid 容器里的子项之间也不折叠。 修法规整:与其记折叠的触发条件,不如改用 gap(第 06 章)—— display: flex; flex-direction: column; gap: 20px; 写 20 就得 20,永不折叠。

居中一行:margin: 0 autoCopy Anchor Link

margin 有个特殊值 auto:水平方向设成 auto,浏览器把剩余宽度平分两边。 所以「块级元素水平居中」的标准答案永远是:

.centered-container {
  width: 80%;
  margin: 0 auto;   /* 上下 0,左右自动 → 居中 */
}

0 是上下,auto 是左右——这两口子各管一个方向⁸。

4. 作者的判断与证据Copy Anchor Link

• 「忘加 border-box 是布局破碎的第一大原因」——全书少数带排行的断言, 经验性,无数据,但与业界共识一致⁵。
• 「margin 折叠:取较大者;左右不折叠」——事实性陈述,书里只给了结论 没给触发条件的完整清单(折叠还发生在父子之间、空元素上,本书未展开)。
• 「inline 元素上加垂直 padding 会压到上下行,改 inline-block 解决」—— 经验断言,指向第 05 章的 display⁹。

5. 边界与局限Copy Anchor Link

• margin 折叠只讲了「相邻兄弟」一种触发情形;父子的折叠(子元素的 margin 穿透父元素) 也是日常撞墙高发区,本书未提,读者撞上时请查 MDN「margin collapsing」词条。
• 没讲 outline(描边,不占空间)与 border 的区别,也没讲盒子的 min-width/max-width (第 12 章的响应式会用到 max-width)。
• box-sizing 的第三种取值(inherit)未提,无关紧要。

判断(我们的,不是书里的): 「先讲默认行为、再讲 border-box 修正」是本书讲法的优点—— 很多教程一上来就 * { box-sizing: border-box },读者不知道自己在规避什么。 本书让缺口(250px)先暴露在眼前,再给出修正,因果完整。 如果错,会错在: 对完全的新手,「为什么默认是这么个坑」的答案(历史兼容性) 本书同样没讲——只给了「现状 + 修正」,好奇心强的读者仍会欠一个答案。

6. 可带走的Copy Anchor Link

1. 四层:content / padding / border / margin;背景铺到 padding 为止¹²。
2. 默认(content-box)下 width 只管内容:200 + 20 + 20 + 5 + 5 = 250px³。
3. box-sizing: border-box 让 width = 总宽,写多少占多少⁶。
4. 起手式 * { box-sizing: border-box; margin: 0; },所有现代项目的默认开头⁵。
5. 四值简写顺时针:上、右、下、左;缺则对边相同。
6. 垂直外边距折叠:两个 20 之间是 20 不是 40;要稳就用 flex + gap⁷。
7. 块级元素水平居中:width + margin: 0 auto⁸。

7. 原文地图Copy Anchor Link