CSS 基础与现代布局：盒模型 / cascade / Flexbox / Grid

0. 元信息

• 主题路径：docs/topics/html-css-responsive/subtopics/css-fundamentals-and-layout/
• 父主题：html-css-responsive
• 主分类：前端与客户端
• 辅助分类：工程技术
• 适合对象：会用 CSS 写样式，但理解停在”试着改”层面的开发者
• 建议周期：11.5 周（每周 812 小时）
• 前置知识：HTML 语义化（html-semantics-and-forms 子主题）
• 最终目标：能解释盒模型、cascade、specificity，写出健壮的 Flexbox 与 Grid 布局

1. 学习路线

盒模型（content / padding / border / margin）→ box-sizing
  → 文档流（normal flow / BFC / IFC / 定位）
  → cascade 与 specificity、@layer、:where()、:is()、!important
  → Flexbox 一维布局（主轴 / 交叉轴 / 弹性 / 换行 / gap / min-width:0）
  → Grid 二维布局（轨道 / 命名线 / area / subgrid / auto-fit / auto-fill）
  → 多列 columns 与现代布局的细节差异
  → 综合：单页复杂布局 + 调试案例

按”模型 → 规则 → 一维 → 二维”的顺序学。每一步先书面画图，再写代码。

2. 阶段周数分配（11.5 周，每天 1.52 小时）

总计约 12~18 小时；1 周紧凑，1.5 周可含断点对照与减动画测试。

3. 九阶段表

陷阱：把 flex: auto 当”自适应宽度”；Grid 不写 display: grid；cascade 顺序记错。

4. 第一周（每天 1.5~2 小时）

Day 1 约定：编辑器 = VS Code + 官方 CSS 扩展 + axe DevTools 扩展；浏览器 = Chrome + Firefox；本计划全程静态 HTML + CSS，不引入框架。截图与 DevTools 设备模拟记录到 notes/week1/dayN/。

Day 7 步骤 C 是验收关键——能讲清”这条样式为什么赢”才算真学会 cascade。

5. 阶段通用验收

1. 不看答案重写该阶段的最小 demo（盒模型 / cascade / flex / grid 各 1 个）；
2. 解释”content-box vs border-box”、“BFC 为何解决 margin collapse”、“@layer 顺序与 specificity 谁先”、“flex 1 vs auto vs none”；
3. 截图 3 种宽度（360 / 768 / 1440）+ DevTools Computed + Cascade 面板；
4. 至少 1 张图标记”每条样式的来源”（手画或 DevTools 截图）；
5. 列出至少 3 类边界：长串文本不撑爆 / sticky 不失效 / auto-fit 在窄屏保留至少 1 列；
6. 给出 cascade 顺序的 4 维矩阵（origin / importance / specificity / order）；
7. 能修改现有页面（加 layer、调 cascade、修 sticky）而不是只能照抄。

6. 最终验收

• 独立完成：1 份完整落地页（nav / hero / 3 列特性 / 页脚），用 flex + grid 拼装；
• 至少完成 9 个练习：3 个盒模型 / BFC、2 个 cascade 矩阵、2 个 flex 布局、2 个 grid 布局；
• 4 个断点：360 / 768 / 1024 / 1440（同一组件）；
• 能口算 auto-fit minmax(250px, 1fr) 在 1200px 下几列（答：4 列）；
• 能解释 flex: 1 等于什么（答：flex: 1 1 0%）；
• DevTools Computed + Cascade 面板可定位每条样式的来源；
• 用 10 分钟讲清”盒模型 → 文档流 → 定位 → cascade → flex / grid”链路。

7. 综合项目

首选：用 flex + grid 拼一个单页复杂布局（含 sticky 头部 / hero / 3 列特性 / 卡片网格 / 杂志 masonry / 页脚），覆盖桌面 / 平板 / 手机 3 个断点，落地”cascade 显式分层 + 4 维矩阵”。

必做：

• 全局 * { box-sizing: border-box } + reset；
• @layer 4 段：reset / tokens / base / components；
• token 系统：颜色 / 字号 / 间距 / 圆角 / 阴影 至少各 1 组；
• sticky 头部 1 个 + flex navbar 1 个 + grid 3 列特性 1 个 + grid auto-fit minmax(...) 卡片 1 个；
• 长串处理：标题 min-width: 0 截断或 text-overflow: ellipsis；
• 至少 1 处用 subgrid 对齐卡片内部；
• DevTools Computed + Cascade 截图，标出”每条样式的来源”；
• 真机或 Device Mode 在 360 / 768 / 1440 各拍 1 张。

备选：重构一套遗留的”全 float + 固定宽度”页面为 flex + grid 布局，附”原 vs 新”截图与 DevTools 标注。

notes/ 与 README 存放规范

所有截图、DevTools Computed / Cascade 标注、token 表统一存放在项目根目录的 notes/ 子目录或 README 的对应章节；提交时一并带上。综合项目的 notes/ 至少包含：

• notes/design.md：cascade 分层、token 表、布局策略（flex / grid 选型）；
• notes/test.md：每张截图对应的断点、DevTools 标注、cascade 矩阵推导；
• notes/retrospective.md：复盘（用时、难点、收获、未完成项）。

任何综合项目都必须包含：

1. 需求与受众；
2. cascade 分层表（reset / tokens / base / components）；
3. token 系统源码（CSS 自定义属性 + :root）；
4. 完整源码（HTML + CSS，可含少量 JS 用于汉堡菜单）；
5. 4 断点截图（360 / 768 / 1024 / 1440）；
6. DevTools 标注：每条样式来源（手画或截图）；
7. README：项目介绍、运行步骤、目录结构、复盘；
8. 复盘记录：用时、难点、收获、下一步。

本主题贡献（Loop 6-D · html-css-responsive / css-fundamentals-and-layout）

本主题给父主题与所有前端子主题铺好”模型 → 规则 → 一维 → 二维”的布局地基，并把 Box Model、Cascade、Flexbox、Grid 四个抽象概念落到能讲清来源、能用 DevTools 复算的工程实践。

3 项核心职责

• 盒模型与文档流：用 box-sizing 切换（content-box vs border-box）+ BFC（overflow: hidden 或 display: flow-root）+ IFC / 定位（static / relative / absolute / fixed / sticky）的对比 demo，把 margin collapse、sticky 失效等”卡半天”的问题用 DevTools 截图定格。
• Cascade 显式分层：用 @layer 写 4 段顺序（reset / tokens / base / components），配合 :where() 把特异性清零、:is() / :has() 收敛选择器，搭出一份 cascade 4 维矩阵（origin / importance / specificity / order），能在 DevTools Cascade 面板逐条指出”这条样式为什么赢”。
• Flexbox + Grid 实战：把 navbar / sticky footer / 3 列特性 / 卡片网格 / 杂志 masonry 用 Flexbox（一维）+ Grid（二维）各归其位，用 auto-fit minmax(...) + subgrid + min-width: 0 三件套把”文字撑爆 / 列数不对 / 卡片不对齐”三类边界逐个收掉。

4 项交付物

1. 盒模型 / BFC 对比 demo：同一组件在 content-box 与 border-box 下的 DevTools Computed 截图，配 BFC 触发 / 关闭时的 margin 行为录屏。
2. Cascade 4 段 @layer 模板：reset / tokens / base / components 四层源码 + cascade 矩阵推导表，能口算 auto-fit minmax(250px, 1fr) 在 1200px 下几列、能口答 flex: 1 = flex: 1 1 0%。
3. Flexbox / Grid 实战页：整页复杂布局（nav / hero / 3 列特性 / 卡片网格 / 页脚），4 断点（360 / 768 / 1024 / 1440），DevTools 标注每条样式来源。
4. 遗留页面重构对比：把”全 float + 固定宽度”的遗留页改写为 flex + grid，附”原 vs 新”截图与 DevTools 标注。

3 个验收指标

• 能不看答案重写 4 个最小 demo：盒模型切换 / cascade 4 段 / flex 三件套 / grid auto-fit。
• DevTools Computed + Cascade 面板：每条样式可定位到 @layer 或选择器，P75 ≤ 5 秒定位。
• 4 断点截图齐全（360 / 768 / 1024 / 1440），覆盖桌面 / 平板 / 手机，遗留页重构后无 float。

8. 推荐开源资料

许可证提示：MDN 内容采用 CC BY-SA 2.5；W3C 规范文本由 W3C 公开；CSS-Tricks 文章为各作者所有；Flexbox Froggy / Grid Garden 源代码开放但内容仅供学习。复制代码或长段引用前先看 LICENSE；默认做法是读思路后自己重写，而不是复制粘贴。

默认使用顺序：MDN / W3C 规范查文档 → CSS-Tricks cheatsheet 速查 → web.dev 走主线 → 写 demo → Flexbox Froggy / Grid Garden 互动验错 → Josh Comeau / Rachel Andrew 进阶看一手 → caniuse 查兼容性。

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

1996 年 CSS 1 让文字与背景分开；2009 年前后 CSS 2.1 稳定，奠定盒模型。2012 年响应式网页设计（RWD）让媒体查询成为必备。2017 年 Grid Layout 落地，Flexbox + Grid 双引擎补齐”一维 vs 二维”的空白。2019~2023 年 Container Queries、Subgrid、Cascade Layers 把 CSS 推到”工程级”。

今天的 web 布局核心是”理解盒模型 + 选对工具”：父元素排子元素用 Flex，区域排列用 Grid，真正复杂的页面二者混用。理解 cascade 才能在大型项目里”加规则而不破坏旧规则”。

9.2 概念地图

flowchart LR
  Box[盒模型] --> Flow[文档流]
  Box --> Size[box-sizing: content-box/border-box]
  Flow --> BFC[BFC 块级格式化上下文]
  Flow --> IFC[IFC 行级格式化上下文]
  Flow --> Position[position: static/relative/absolute/fixed/sticky]

  CSS[Cascade]
  CSS --> Specificity[specificity: id/class/type]
  CSS --> Origin[origin: user-agent / user / author]
  CSS --> Layer[@layer 顺序]
  CSS --> Important[!important]
  CSS --> Where[:where() 把特异性变 0]
  CSS --> Is[:is()/:not()/:has()]

  Flow --> Flex[Flexbox 一维]
  Flex --> Main[主轴 / justify-content]
  Flex --> Cross[交叉轴 / align-items]
  Flex --> Shrink[flex-shrink / flex-grow / flex-basis]
  Flex --> MinWidth[min-width: 0 解决文本溢出]

  Flow --> Grid[Grid 二维]
  Grid --> Track[grid-template-columns / rows]
  Grid --> Area[grid-template-areas / grid-area]
  Grid --> Line[命名线 / grid-column / grid-row]
  Grid --> AutoFit[auto-fit / auto-fill + minmax]
  Grid --> Subgrid[subgrid 对齐]

9.3 基础知识讲解

9.3.1 规范 / 论文

9.3.2 经典书籍

9.3.3 优秀博客 / 文档

9.3.4 核心人物

9.3.5 开发方法

9.3.6 必读资源子集（≥5 条）

1. MDN CSS Reference
2. CSS-Tricks — A Complete Guide to Flexbox
3. CSS-Tricks — A Complete Guide to Grid
4. Rachel Andrew — Grid by Example
5. Lea Verou — CSS Secrets（书 + 博客）
6. web.dev Learn CSS

9.4 经典问题与经典案例

9.5 学习难点

概念难点

思维难点

工程难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

• CSS Working Group 定义 CSS 各模块与属性。
• 浏览器实现在 caniuse 上可见。
• 工具链（Lightning CSS / PostCSS）负责把现代语法降到目标浏览器。

9.6.3 Structure

• 核心属性速记：
  • 布局：display、position、inset、flex / grid 相关属性。
  • 间距：margin、padding、gap、row-gap、column-gap。
  • Cascade：@layer、:where()、:is()、:not()、:has()、!important。
  • 现代：aspect-ratio、color-scheme、accent-color、subgrid、place-*。

9.6.4 Ecosystem

• 工具：Lightning CSS、PostCSS、Tailwind / UnoCSS、Sass、stylelint、autoprefixer。
• 调试：Chrome DevTools、Firefox DevTools、Safari Web Inspector、Web Inspector Agent。
• 学习：Flexbox Froggy、Grid Garden、CSS Diner、CSS Battle。

9.6.5 Depth Tiers

本子主题目标：L3。

9.6.6 Source

• W3C CSS WG：各模块当前状态。
• MDN CSS：属性与示例权威。
• caniuse：浏览器支持。
• 引用快照日期：2026-07-30。

10. 常见误区

• 忘记 display: grid，子元素按普通 block 排；
• auto-fit minmax(...) 写错顺序；
• flex 子元素忘 min-width: 0 导致溢出；
• 用 position: absolute 把元素甩出屏幕忘记 inset: 0；
• position: sticky 失效不查 overflow 祖先；
• margin collapse 期望消失而 flex/grid 不折叠；
• @layer 顺序与 specificity 混；
• 用 !important 强行覆盖；
• 忘记 box-sizing: border-box 全局；
• Grid grid-template-areas 名字写错一处全部失效；
• place-items 与 align-items / justify-items 重复写；
• Grid 子元素用 flex 父属性；
• aspect-ratio 与 width:100% 一起漏写 height:auto；
• 媒体查询走 max-width 而非 min-width（desktop-first 思维未切）；
• DevTools 不开”computed” / “specificity”找根因；
• 用 polyfill 兼容旧 IE，但项目其实没要求。

11. 所有知识点分类（统一规则）

本子主题归属：前端与客户端 主 + 工程技术 辅。