CSS 盒模型与布局

学习目标

这一课把 CSS 布局的三个基本功拼在一起：盒模型（box model，把每个元素看作由内容、内边距、边框、外边距组成的盒子）、Flex（弹性布局，处理一维排列）和 Grid（网格布局，处理二维排布）。读完你应该能算清一个元素实际有多宽，能搭出课程页面的常见布局，并解释内容为什么会溢出。

问题场景

设计稿上两张卡片各占一半宽，你写了 width: 50%，加 padding: 16px 之后两张卡片挤不下一行，换行了；改小宽度又对不齐。这不是浏览器抽风，而是你没算上盒模型的另外几层——先搞清「宽度到底指什么」，这类问题就消失大半。

核心解释

默认口径（box-sizing: content-box）下，你写的 width 只是内容区宽度，实际占位 = 内容 + 内边距 + 边框。所以 width: 50% 加 padding: 16px 的实际宽度是 50% + 32px，两张卡片必然放不下。行业通行做法是全局改成 border-box：width 直接等于「内容 + 内边距 + 边框」的总宽，和设计稿的算法一致：

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

排布上分工明确：一行内的排列用 Flex（display: flex，子项默认横排，justify-content 控制主轴对齐，align-items 控制交叉轴对齐），成块的行列用 Grid（display: grid，grid-template-columns 直接定义列）：

.courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分列，fr 是剩余空间的份数 */
  gap: 16px;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

示例拆解

溢出最常见的来源，是「flex 子项里装了不可断行的内容」（长单词、长 URL）。flex 子项的默认最小宽度等于内容的宽度，内容不肯断行，子项就把容器撑破：

<div class="row">
  <div class="item">短内容</div>
  <div class="item">https://example.com/a-very-long-path-without-spaces</div>
  <div class="item">右侧内容</div>
</div>

.row { display: flex; }
.item { min-width: 0; overflow-wrap: anywhere; }

• min-width: 0 允许子项被压缩到比内容窄（默认值 auto 不允许）；
• overflow-wrap: anywhere 让长字符串在任意位置断行；
• 验证：删掉这两个声明刷新，长 URL 会把右侧内容挤出容器；加回来就恢复正常。
• 网格同理：repeat(auto-fill, minmax(200px, 1fr)) 能在容器变窄时自动减少列数，是课程卡片列表的常用写法。

动手任务

打开本课实验区：

1. 点击「切换全局 box-sizing」按钮，观察两个声明完全相同的盒子谁变宽了，用本课的宽度公式解释它。
2. 点击「切换溢出修复」按钮，观察长 URL 是否被驯服，说出是哪两个声明在起作用。
3. 把实验区 Grid 的 repeat(3, 1fr) 改成 repeat(auto-fill, minmax(200px, 1fr))，拖窄预览窗口看列数变化。

常见错误

• 加了 padding 就溢出：没设 border-box，width 加 padding 超出容器；先统一 box-sizing 再排查。
• flex 子项被长内容撑爆：默认 min-width: auto 不许压缩，给可能装长内容的子项加 min-width: 0。
• 用负 margin 硬调对齐：对不齐通常是 align-items 或行高问题，负 margin 只会把问题搬到别处。
• Grid 列宽写死 px：容器一变窄就横向溢出，比例场景用 fr 或 minmax()。

检查与复盘

完成下方检查题确认理解。自查清单：

• 能算出 border-box 口径下元素的最终占位宽度
• 能说手头这个布局该用 Flex 还是 Grid，并给出理由
• 遇到溢出会按顺序检查：长内容？min-width？固定宽度？

参考资料

• MDN：盒模型 —— content/padding/border/margin 的权威讲解
• MDN：Flexbox —— 一维布局的系统教程
• MDN：Grids —— 二维网格布局的系统教程