第 7 章结构与布局

覆盖内在尺寸、表格列宽、兄弟计数、满幅背景、垂直居中和紧贴底部页脚；用渲染探针、值处理轨迹和渐进增强发布门完成独立复核。

学习目标

能说明“第 7 章结构与布局”如何覆盖内在尺寸、表格列宽、兄弟计数、满幅背景、垂直居中和紧贴底部页脚，并明确2015原书技巧、现行规范事实与现代替代之间的时间边界
能先预测“怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？”的计算值或绘制结果，再沿DOM、声明、层叠、计算、布局与绘制逐阶段核对
能注入“用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动”，用“包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立”决定接受、修正或拒绝样式发布

为什么从这个CSS问题开始

布局页把结果归因于算法输入：内容贡献、可用空间与轨道约束；固定像素只是某次结果，不是布局合同。 “第 7 章结构与布局”使用的贯穿任务是：构建文档页，包含定宽内容的满幅区、数据表、动态卡片组、垂直居中空态和短页页脚。操作前先预测哪个声明、计算值、布局盒或绘制层会变化，渲染后再补理由不算预测。

本页围绕“怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？”建立正常、反例与恢复路径。只有“第 7 章结构与布局”保持“包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立”并交付包含块、min/max-content贡献、轨道、自由空间、表格算法、兄弟数量、长短内容、窄屏、溢出和页脚位置记录。，视觉效果才构成CSS证据。

原版47项技巧、57个目录坐标与现代边界

“第 7 章结构与布局”以O'Reilly官方目录核对Lea Verou著、2015年6月、388页、ISBN 9781449372736、八章和47个连续编号技巧；作者出版页确认《CSS Secrets》由O'Reilly于2015年出版，中文版书页核对《CSS揭秘》的中文出版信息。原版47项编号技巧分布在第2至第8章；若把八个章标题和第一章两个方法主题一起计算，公开目录共有57个坐标。

“第 7 章结构与布局”只依据官方目录限定范围，不逐段改写原文；解释、示例、交互、练习与答案均为独立教学重写。47是编号技巧分母，57是完整目录坐标分母，两者不能混称。

“第 7 章结构与布局”另以技术核对 1、技术核对 2、技术核对 3、技术核对 4核对现行技术事实。2015年的技巧保留为历史方案；现行CSS规范用于解释仍成立的层叠、背景、几何、排印、布局与动画机制，或标出现代原生替代。现行语法不能倒填为原书内容，草案特性也不能冒充跨浏览器基线。

公开目录坐标与CSS机制

第7章结构与布局

公开坐标 1/7。 在“第 7 章结构与布局”的坐标1中，第7章结构与布局用于封闭本章问题类型、规范机制与回退证据；先固定DOM和浏览器基线，再用目录坐标、编号技巧、相邻章节和发布结论复核，出现跨章技巧脱离原始约束拼贴时不得提交。

36 自适应内部元素

公开坐标 2/7。 36 自适应内部元素进入“第 7 章结构与布局”后要回答第2张声明卡：它怎样由内在尺寸、包含块、轨道与自由空间计算布局、改变哪个计算值或绘制层、由哪些min/max-content贡献、可用空间、轨道、溢出和内容边界证明，并如何排除固定高度和魔数只适配单一样本。

37 精确控制表格列宽

公开坐标 3/7。 围绕“怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？”，条目3把37 精确控制表格列宽解释为由内在尺寸、包含块、轨道与自由空间计算布局；复核者先读取min/max-content贡献、可用空间、轨道、溢出和内容边界再判断截图，不能接受固定高度和魔数只适配单一样本。

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

公开坐标 4/7。 对“第 7 章结构与布局”而言，38 根据兄弟元素的数量来设置样式的最小合同是由内在尺寸、包含块、轨道与自由空间计算布局，第4次检查保存min/max-content贡献、可用空间、轨道、溢出和内容边界；若产生固定高度和魔数只适配单一样本，就回到声明、层叠或布局上游。

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

公开坐标 5/7。 第5个公开目录坐标39 满幅的背景，定宽的内容服务于覆盖内在尺寸、表格列宽、兄弟计数、满幅背景、垂直居中和紧贴底部页脚，需要以min/max-content贡献、可用空间、轨道、溢出和内容边界呈现由内在尺寸、包含块、轨道与自由空间计算布局；固定高度和魔数只适配单一样本会破坏“包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立”。

40 垂直居中

公开坐标 6/7。 学习者在“第 7 章结构与布局”中讨论40 垂直居中前预测由内在尺寸、包含块、轨道与自由空间计算布局会改变哪项值或像素状态，再读取min/max-content贡献、可用空间、轨道、溢出和内容边界；观察到固定高度和魔数只适配单一样本时保留失败轨迹。

41 紧贴底部的页脚

公开坐标 7/7。 构建文档页，包含定宽内容的满幅区、数据表、动态卡片组、垂直居中空态和短页页脚。在条目7处理41 紧贴底部的页脚时，要把由内在尺寸、包含块、轨道与自由空间计算布局写进样式合同，把min/max-content贡献、可用空间、轨道、溢出和内容边界写进运行记录，并把固定高度和魔数只适配单一样本写进反例。

先预测，再操作三个CSS实验

分步1 / 3

1. 声明与渲染探针

切换“内在尺寸、垂直居中、紧贴底部页脚”并一次只调整一个控制量，核对声明、回退和实际绘制怎样连接“第 7 章结构与布局”。

声明与渲染探针

改一个量，观察真实绘制结果

怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？

单一控制量：50width: fit-content

基线：width: auto

让盒尺寸由内容贡献和可用空间共同限制

内在尺寸

本页目录坐标：第7章结构与布局、36 自适应内部元素、37 精确控制表格列宽、38 根据兄弟元素的数量来设置样式、39 满幅的背景，定宽的内容、40 垂直居中、41 紧贴底部的页脚

第 7 章结构与布局的可重放CSS协议

阶段	CSS动作	必留证据	拒绝条件
声明包含块与内在尺寸	在“第 7 章结构与布局”执行声明包含块与内在尺寸，一次只改变一个声明或环境条件	DOM、浏览器基线、视口、字体与初始样式	语义或依赖不可追溯
分配轨道和自由空间	在“第 7 章结构与布局”执行分配轨道和自由空间，一次只改变一个声明或环境条件	层叠来源、computed style、布局盒与绘制截图	用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动
注入长内容窄屏与空状态	在“第 7 章结构与布局”执行注入长内容窄屏与空状态，一次只改变一个声明或环境条件	回退、输入、偏好、性能与现代边界记录	无法重放或恢复基础样式

unit: "csec-unit-07"
question: "怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？"
scenario: "构建文档页，包含定宽内容的满幅区、数据表、动态卡片组、垂直居中空态和短页页脚。"
recipes: ["内在尺寸", "垂直居中", "紧贴底部页脚"]
stages: ["声明包含块与内在尺寸", "分配轨道和自由空间", "注入长内容窄屏与空状态"]
invariant: "包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立"
fault: "用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动"
evidence: "包含块、min/max-content贡献、轨道、自由空间、表格算法、兄弟数量、长短内容、窄屏、溢出和页脚位置记录。"
reset: restore_recipe_value_trace_step_gates_and_artifact

该协议要求“第 7 章结构与布局”在相同DOM、浏览器、视口、字体、输入和用户偏好下重放。重置后若技巧、控制量、轨迹模式、步骤、发布门或证据显示没有回到基线，交互状态已经污染比较，不能作为CSS证据。

本页回顾

掌握“第 7 章结构与布局”不是背诵代码片段，而是能围绕“怎样用内在尺寸、格式化上下文和可用空间解释布局，而不是用固定高度与魔数补丁？”重建值处理与绘制路径，并用“包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立”拒绝“用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动”。最终交付为包含块、min/max-content贡献、轨道、自由空间、表格算法、兄弟数量、长短内容、窄屏、溢出和页脚位置记录。

练习与答案

练习

问题 1：CSS合同。 “第 7 章结构与布局”为什么必须先声明DOM、浏览器基线、视口、字体、输入与用户偏好？

问题 2：目录逐项覆盖。 怎样证明本页公开目录坐标已经进入机制、交互和练习？

“第 7 章结构与布局”的第7章结构与布局：以“封闭本章问题类型、规范机制与回退证据”解释CSS作用，用“目录坐标、编号技巧、相邻章节和发布结论”提供复核。
“第 7 章结构与布局”的36 自适应内部元素：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。
“第 7 章结构与布局”的37 精确控制表格列宽：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。
“第 7 章结构与布局”的38 根据兄弟元素的数量来设置样式：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。
“第 7 章结构与布局”的39 满幅的背景，定宽的内容：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。
“第 7 章结构与布局”的40 垂直居中：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。
“第 7 章结构与布局”的41 紧贴底部的页脚：以“由内在尺寸、包含块、轨道与自由空间计算布局”解释CSS作用，用“min/max-content贡献、可用空间、轨道、溢出和内容边界”提供复核。

问题 3：反例恢复。 怎样证明“用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动”已经被修正？

为“第 7 章结构与布局”复用同一DOM、浏览器、视口、字体、输入和偏好，重放正常路径后只注入“用固定视口高度减去猜测头部高度实现页脚，内容换行后发生重叠和双滚动”；记录最早偏离点，撤销故障并再次运行。只有渲染探针、值处理轨迹、发布门和包含块、min/max-content贡献、轨道、自由空间、表格算法、兄弟数量、长短内容、窄屏、溢出和页脚位置记录。重新满足“包含块、最小与最大内容尺寸、自由空间、溢出和DOM关系固定，布局在内容增长与窄屏下仍成立”，修正才可提交。

名词解释

本章出现的专业名词，用大白话再讲一遍。

结构与布局: 对应“第7章结构与布局”；在“第 7 章结构与布局”中用于封闭本章问题类型、规范机制与回退证据，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
自适应内部元素: 对应“36 自适应内部元素”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
精确控制表格列宽: 对应“37 精确控制表格列宽”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
根据兄弟元素的数量来设置样式: 对应“38 根据兄弟元素的数量来设置样式”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
满幅的背景，定宽的内容: 对应“39 满幅的背景，定宽的内容”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
垂直居中: 对应“40 垂直居中”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。
紧贴底部的页脚: 对应“41 紧贴底部的页脚”；在“第 7 章结构与布局”中用于由内在尺寸、包含块、轨道与自由空间计算布局，需要连接原书年份、DOM、声明、计算、布局、绘制与回退。

第 7 章 结构与布局

学习目标

为什么从这个CSS问题开始

原版47项技巧、57个目录坐标与现代边界

公开目录坐标与CSS机制

第7章 结构与布局

36 自适应内部元素

37 精确控制表格列宽

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

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

40 垂直居中

41 紧贴底部的页脚

先预测，再操作三个CSS实验

1. 声明与渲染探针

改一个量，观察真实绘制结果

第 7 章 结构与布局的可重放CSS协议

本页回顾

练习与答案

练习

名词解释

名词解释

讨论

第 7 章结构与布局

第7章结构与布局

第 7 章结构与布局的可重放CSS协议