第 7 章 结构与布局

直觉起点

、、、、共同构成本页的观察坐标。让内容、容器和视口各自承担尺寸责任，用内在尺寸、表格算法、选择器计数与弹性空间解决结构问题。本页覆盖 7 个公开目录条目。《CSS 揭秘》的价值不只是给出效果代码，而是展示怎样从限制条件中找到更少依赖的机制；所以每个示例都必须同时保留基线、增强和失败解释。

六阶段解题链

1. 标出尺寸所有者

先写视觉与交互契约，不写具体属性。固定 DOM、文本、视口、字体和输入方式，预测无增强样式时应保留的内容、尺寸、焦点和阅读顺序。

2. 测量内在尺寸

查明目标效果属于盒生成、背景绘制、边框、滤镜、字体、布局还是合成阶段。只选能直接解释目标的机制，并注明规范能力与实现边界。

3. 选择布局算法

构造最小代码，删除重复数值、镜像状态和额外 DOM。先预测计算值与绘制区域，再运行正常样本，记录首个产生目标效果的声明。

4. 分离背景与内容

只改变一个变量，例如容器宽度、文本长度、背景、字体、输入方式或动态偏好。停止在首个偏离点，不用更多覆盖把失败截图修平。

5. 分配剩余空间

关闭关键能力，检查自然回退是否仍可读、可操作、可布局。增强方案不能反向破坏基线，也不能以颜色、动画或装饰替代语义。

6. 注入长短内容

清除故障后重放同一 DOM，确认没有旧内联样式、重复常量、隐藏焦点或层叠残留。把通过条件写成以后可以自动或人工复查的证据。

核心机制深挖

让内容、容器和视口各自承担尺寸责任，用内在尺寸、表格算法、选择器计数与弹性空间解决结构问题。 解题时先区分结构事实、计算样式、绘制结果和交互状态：结构决定语义与可访问名称，级联和布局产生计算值与使用值，背景、边框、阴影、滤镜再参与绘制，动画与输入只改变状态。把这些阶段混在一起，往往会用多余 DOM 修背景、用固定尺寸修布局、用不可见原生控件修状态，最终难以维护。

本页签发不变量是：布局尺寸应由内容与可用空间共同决定，短内容不漂移、长内容不溢出，背景与正文宽度职责清晰。 对每个方案都要问四个问题：不支持高级能力时剩下什么；内容变长时谁负责尺寸；键盘与触摸是否仍能完成任务；删除故障声明后是否回到同一基线。只有四问都有可复现答案，技巧才从演示升级为工程方案。

出版社目录逐项讲解

第7章 结构与布局

本章从内在尺寸和剩余空间分配出发，解决自适应元素、表格、全幅背景、居中和页脚。判断方案时先问谁拥有宽高，再选择布局算法；不要用 transform 或固定像素掩盖错误的尺寸责任。

证据记录从“标出尺寸所有者”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

36 自适应内部元素

width: min-content 让容器收缩到不导致可避免溢出的最小内在宽度，适合图文说明；再用 max-width: 100% 限制窄视口。无支持环境可用 inline-block 回退，长单词和大图必须单独测试。

证据记录从“测量内在尺寸”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

37 精确控制表格列宽

table-layout: fixed 按首行或显式宽度分配列，避免后续长内容重新改变整表。为可伸缩列保留未指定空间，并设置溢出策略；表头语义、窄屏阅读和极长单元格比视觉等宽更重要。

证据记录从“选择布局算法”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

38 根据兄弟元素的数量来设置样式

结构伪类可让第一个子元素在满足特定总数时命中，再通过通用兄弟选择器扩散样式。推导时写清数量条件和作用集合，避免难读选择器；动态增删节点后所有兄弟应同步切换。

证据记录从“分离背景与内容”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

39 满幅的背景，定宽的内容

背景属于全宽外层，正文用 max-width 与自动外边距约束；calc 方案可让单元素 padding 同时填充视口余量。明确断点和最小边距，避免复制一套容器宽度常量到每个区块。

证据记录从“分配剩余空间”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

40 垂直居中

选择方法取决于尺寸是否已知以及容器使用何种布局。Flex 或 Grid 直接分配剩余空间，绝对定位配合 translate 适合覆盖层，表格模型是旧回退；文本基线、长内容与溢出必须验证。

证据记录从“注入长短内容”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

41 紧贴底部的页脚

页面建立至少一个视口高的纵向 flex 容器，让 main 获得 flex:1，短内容时吸收剩余空间，长内容时自然增高。页脚不使用 fixed，因而不会遮住正文；移动视口高度变化也要测试。

证据记录从“标出尺寸所有者”开始：先写出未增强时的可用结果，再只加入一个 CSS 能力，比较计算样式、绘制边界、内容语义、输入状态和失败回退。若方案需要复制尺寸、隐藏真实控件、依赖固定内容或无法解释的层叠补丁，就回到最小样本重做。

方案比较矩阵

最小可运行实验

.figure {
  width: min-content;
  max-width: 100%;
}
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page > main {
  flex: 1;
}

<article class="secret component" data-enhanced>
  <button class="action" type="button">验证基线与增强</button>
  <p>用长内容、窄容器、键盘和能力缺失重放同一结构。</p>
</article>

book: CSS 揭秘
page: csec-07-structure-layout
sample: baseline | enhanced | failure | recovery
toc_entries: 7
semantic_content_preserved: true
fallback_operable: true
first_divergence: null

常见误区与故障注入

四类样本与验收

目录证据：第7章 结构与布局、36 自适应内部元素、37 精确控制表格列宽、38 根据兄弟元素的数量来设置样式、39 满幅的背景，定宽的内容、40 垂直居中、41 紧贴底部的页脚。本页不复制原书正文，而是按公开目录独立重构问题、机制、实验与验收，确保每个标题都有可执行学习证据。

练习

小结

• intrinsic sizing：连接“标出尺寸所有者”与规范依赖。
• table-layout：连接“测量内在尺寸”与最小基线。
• 结构伪类：连接“选择布局算法”与增强机制。
• calc：连接“分离背景与内容”与边界故障。
• flex：连接“分配剩余空间”与恢复证据。
• 7 个本页目录条目已经全部进入问题、机制、实现与验收链。
• 现代便利写法只作对照，原书 2015 年方案的机制身份与回退路径保持清楚。

术语表