HTML、CSS与可访问性 · KNOWLEDGE CHAPTER

K03

盒模型与布局

布局是一组尺寸约束的求解过程，不是把 width 数字原样画出来。先确定盒子哪一层被指定，再看内容的固有尺寸、父布局如何分配空间、相邻盒子怎样产生间距，最后决定溢出应保留、换行、滚动还是裁剪。只有明确内容能否损失，才谈得上选属性。

HTML、CSS与可访问性2 道章节练习6 道主练关联

核心模型

原理与机制

盒模型给尺寸命名，约束决定最终结果

content-box 的 width 指内容区，左右 padding 与 border 另加；border-box 把二者纳入宽度，但从不包含 margin。宽 200、两侧 padding 各 20、边框各 1 时，内容区通常是 158。width 还会受 min/max、布局算法与固有尺寸影响；若 padding 与 border 已超过指定宽度，内容区不能变成负数，实际边框盒仍会更大。图片 max-width:100% 限制上界，height:auto 维持比例，小图不会仅因上界而自动放大。

先解除自动最小尺寸，再处理文本本身

Flex 沿一个主轴分配空间，每条换行线独立计算，因此末行的 flex-grow 可能让卡片变宽。Grid 共享行列轨道，更适合二维对齐。flex:1 仍可能受项目自动最小尺寸限制，长标题常需 min-width:0；这只允许盒子缩小，还应选择换行或省略。纵向可收缩滚动区要检查 min-height:0。Grid 轨道可用 minmax(0,1fr) 明确零下限，但子项与内容的溢出策略仍需单独安排。

格式化上下文与外边距是两套相关规则

浮动子元素可能不计入普通父容器的自动高度；display:flow-root 创建 BFC，能包含内部浮动，也隔开父子 margin 折叠，但不取消内部兄弟的所有折叠。符合条件的块方向外边距形成折叠集合：正负混合时最大正值加最负值，全正取最大值，全负取最负值。20、30、-8、-12 合成 18，不可先两两计算再重复合并。空块也可能让上下 margin 连成一个集合。组件间距用父布局 gap 往往比负 margin 更易推理。

轨道共享比视觉对齐更精确

各卡片独立建 grid 时，自动行高只由自己内容决定。要让标题、价格、按钮跨卡片共享行高，应使卡片跨父网格三行，再设置 grid-template-rows:subgrid；子内容参与共享轨道计算。只共享列时则设置列 subgrid，并确保项目确实跨到所需列。内部 Flex 加 margin-block-start:auto 能把按钮推到底，却不能保证中间价格逐行对齐。始终保留合理 DOM 顺序，避免为齐线截断重要内容。

裁剪与滚动必须分别理解

overflow:hidden 可裁剪且形成可程序滚动的容器，常同时建立独立格式化上下文；clip 不允许程序滚动，单独也不建立 BFC，需要时组合 flow-root。两轴计算会联动：一轴不是 visible/clip 时，另一轴 visible 计算为 auto、clip 计算为 hidden。因此 overflow-x:clip;overflow-y:auto 不能仍按纯 clip 推理。应看计算值，并检查焦点环、阴影和弹层是否被裁掉，装饰裁剪最好局限于装饰层。

最小示例

css

.row { display: flex; inline-size: 18rem; gap: .5rem; }
.row > img { inline-size: 4rem; flex: none; }
.title { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.card { display: grid; grid-row: span 3; grid-template-rows: subgrid; }

给 title 放一条没有空格的长网址，比较移除 min-inline-size 与换行策略时的结果：盒子允许收缩和文字如何显示是两个决定。cards 中每张卡片按标题、价格、按钮顺序放三个子元素，长标题增加共享行高；移除 subgrid 后，各卡片恢复独立行尺寸。

环境：支持本章相关特性的现代浏览器；CSS 片段需配合说明中的最小 HTML。

核验：未执行教学示例；说明中的结果为机制推演，不是本轮测试通过记录。

边界与取舍

边界

border-box 不保证永不超宽，内容尺寸的零下限与 min-width 都可能改变结果。
flow-root 不是层叠上下文或 GPU 图层，也不会阻止内部所有兄弟 margin 折叠。
overflow:hidden 虽没有滚动条，仍可能受焦点或脚本滚动；用它修宽度可能隐藏真实内容。

取舍

Flex 适合内容主导的一维分配，Grid 适合共享二维约束；嵌套组合通常比强行只用一种更清楚。
严格 subgrid 对齐能统一阅读节奏，但可能产生更大留白；仅需按钮齐底时简单 Flex 就够。

口述示范

我先检查盒模型与 min/max，再区分项目不能缩小还是内容没有换行。布局上按一维、二维和共享轨道选择 Flex、Grid、subgrid；间距先确认是否存在折叠集合，裁剪则独立评估滚动和可访问性副作用。

章节练习

练习 1

假设 CSSLab 有固定页头、可滚动正文和三列卡片，排查长标题撑开页面。

展开检查点

逐级检查需要收缩的 Flex/Grid 项；横轴 min-width、纵轴 min-height 不可混用。
轨道 minmax(0,1fr) 与文字换行共同验证，检查末行宽度。

文章浮动图撑不高父容器，改成 clip 后又复现，应该怎样修？