02. CSS 盒子模型解析

• 1. 标准盒子模型（W3C Box Model）
• 2. 替代盒子模型（IE Box Model）
• 3. 模型切换与应用场景
• 4. 布局影响分析
• 5. 浏览器调试技巧
• 6. 最新规范演进

1. 标准盒子模型（W3C Box Model）

标准盒子模型由四部分组成：content（内容区）、padding（内边距）、border（边框）和 margin（外边距）。其计算方式遵循以下规则：

/* 示例：元素最终宽度计算 */
.box {
  width: 200px;        /* 内容宽度 */
  padding: 20px;       /* 内边距 */
  border: 5px solid;   /* 边框 */
  margin: 10px;        /* 外边距 */
}

总占用空间计算公式：

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

2. 替代盒子模型（IE Box Model）

通过 box-sizing: border-box 激活，将边框和内边距包含在元素宽度内：

.box {
  box-sizing: border-box;
  width: 200px;        /* 包含边框和padding */
  padding: 20px;
  border: 5px solid;
}

计算公式简化为：

总内容宽度 = width - padding-left - padding-right - border-left - border-right

3. 模型切换与应用场景

通过 box-sizing 属性控制模型选择：

• content-box（默认）：标准模型
• border-box：替代模型

典型应用对比：

<!-- 标准模型布局 -->
<div style="width: 50%; padding: 20px;">可能溢出的容器</div>

<!-- 替代模型布局 -->
<div style="box-sizing: border-box; width: 50%; padding: 20px;">稳定布局</div>

4. 布局影响分析

当使用 Flexbox 或 Grid 布局时，box-sizing 会产生不同表现：

Flex 容器使用 border-box 时：
子元素尺寸 = 指定宽度（包含 padding + border）
分配剩余空间时更直观

标准模型可能导致：
子元素实际占用空间超出预期
需要手动计算补偿值

5. 浏览器调试技巧

Chrome DevTools 可视化解析：

1. 按 F12 打开开发者工具
2. 选择 Elements 面板
3. 点击 Layout 选项卡
4. 查看盒子模型层级图示

调试建议：

• 使用通用样式重置：

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

• 复杂布局中混合使用两种模型时添加注释说明

6. 最新规范演进

CSS Box Model Module Level 4 草案引入新特性：

• box-sizing: padding-box（实验性）
• 逻辑属性支持：

/* 方向感知的 padding */
padding-inline-start: 15px;
padding-block-end: 10px;

浏览器兼容性提示：

属性	Chrome	Firefox	Safari
box-sizing	100%	100%	100%
逻辑属性	87+	66+	14.1+