CSS排版布局篇(3)：盒模型（box model）理解文档流（Document Flow）是 CSS 排版的“血液

理解 文档流（Document Flow） 是 CSS 排版的“血液循环系统”，
而 盒模型（Box Model），则是这个体系中每一个“细胞”的基本结构单位。
——CSS 世界的一切，最终都以“盒（box）”的形式被渲染。

历史背景：为什么要有“盒模型”？

1. HTML 的初期困境

在 1994–1996 年，网页只有文字与图片，人们只是堆叠 <p>、<img>、<table>。
那时最大的问题是：

“我想让这段文字离边框远一点，可是我该怎么控制这段内容的空间？”

举例：

<div>Hello World</div>

在浏览器看来，这就是一行文字——根本不知道要不要有空隙。

于是人们提出了：

❝ 我们应该有一套“空间定义机制”——告诉浏览器内容与边界的关系。❞

2. CSS1 的诞生：盒子的抽象思维

CSS1（1996）确立了一个核心设计思想：

“一切元素都是盒子（Everything is a box）。”

浏览器渲染每个元素时，都会创建一个矩形盒子（box），
这个盒子由四个层级组成：

┌──────────────────────┐
│      margin          │ ← 元素外边距（与他人保持距离）
│  ┌──────────────────┐
│  │     border       │ ← 边框（元素轮廓）
│  │  ┌────────────┐  │
│  │  │  padding   │  │ ← 内边距（保护内容）
│  │  │ ┌────────┐ │  │
│  │  │ │content │ │  │ ← 内容区域（真正的文字、图像）
│  │  │ └────────┘ │  │
│  │  └────────────┘  │
│  └──────────────────┘
└──────────────────────┘

📦 于是：

content box：内容本体
padding box：内容缓冲区
border box：边界线
margin box：外部空间

这就是最初的 CSS 盒模型。

盒模型的结构与计算规则

每个盒子都有四层区域与对应属性：

区域	属性	说明
内容区	`width` / `height`	元素本身的内容尺寸
内边距区	`padding`	内容与边框的间距
边框区	`border`	内容与外部的视觉边线
外边距区	`margin`	元素与其他元素的距离

内容区（Content Box）

控制实际内容的大小：

width: 200px;
height: 100px;

这两个属性只定义“内容本体”的宽高，不包括内边距与边框。

内边距（Padding）

用于“内容与边框之间的缓冲区”，
可单独控制四个方向：

padding: 10px; /* 四个方向相同 */
padding: 10px 20px; /* 上下10 左右20 */
padding: 5px 10px 15px 20px; /* 上右下左 */

边框（Border）

定义元素轮廓的样式：

border: 2px solid #333;

border-width
border-style
border-color

注意：border 的宽度会参与盒子的总宽度计算。

外边距（Margin）

定义元素与外界的距离：

margin: 20px;

特殊规则：

块元素上下 margin 可能会合并（margin collapsing）
auto 值可用于居中对齐

标准盒模型 vs IE 盒模型

早期浏览器（IE5）对盒模型理解不同：

W3C 规定：width 只表示 content
IE5：width 表示 content + padding + border

所以两者计算方式不同：

模型类型	width 含义	总宽度计算
标准盒模型（content-box）	内容宽度	width + padding + border + margin
IE盒模型（border-box）	包含内边距与边框	width + margin

为兼容这两者，CSS3 引入了：

box-sizing: content-box; /* 标准模型 */
box-sizing: border-box;  /* IE模型 */

现在主流布局一般都使用 border-box，因为计算更直观。

盒模型的行为与文档流的关系

1️⃣ 块盒（block box）在 BFC（块级格式化上下文） 中按垂直方向排列
→ 它的 margin 决定与上下元素的距离。

2️⃣ 行内盒（inline box）在 IFC（行内格式化上下文） 中水平排列
→ 它的 line-height 决定行距。

3️⃣ 盒模型属性（margin、border、padding）会作用在不同的上下文中：

对 block 元素：影响垂直布局；
对 inline 元素：影响文字间距、行高。

盒模型的控制

水平居中

margin: 0 auto;

前提：

元素必须是块级；
必须有确定的宽度。

内外边距百分比行为

百分比 padding、margin 是相对于父元素的宽度计算的，不是高度。

`border-box` 的普及化

现代浏览器与框架（Bootstrap、Tailwind）几乎都全局启用：

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

原因：
设计时更容易控制总宽度，无需再反复加减 padding。

现代 CSS 的“扩展盒模型”

CSS3 之后，“盒”的概念进一步扩展，出现了更多“增强型盒子”：

类型	功能
`flex box`	弹性分配空间（CSS3）
`grid box`	精确二维布局（CSS3）
`multi-column box`	多列文本（CSS3）
`ruby box`	东亚注音标记（CSS3）
`scroll box`	滚动容器（CSS Overflow 3）
`containment box`	隔离布局计算（CSS Containment）

换言之，CSS 世界所有的“高级布局”，都是在基本盒模型的基础上，
定义了新的“空间分配与排列规则”。

总结：盒模型的本质

层级	作用	类比
content	元素的核心内容	文字
padding	内容与边框的缓冲	安全区
border	元素的外轮廓	外壳
margin	与他人的距离	空气层

盒模型是“CSS 空间思想”的最小原子单位。
理解它，就理解了 CSS 如何“造空间”。

CSS排版布局篇(3)：盒模型（box model）