WHY IT MATTERS
先用一句白话理解
CSS 像公司的管理制度：越靠近具体组件的规则越具体，通用制度负责兜底；如果没有明确层级，大家都靠“提高优先级”抢话语权，项目很快就会失控。
LEARNING OUTCOMES
学完你能做到什么
用级联、继承和优先级解释最终样式来自哪里
使用 Flexbox 与 Grid 完成常见一维和二维布局
建立设计令牌、深浅主题和可复用组件样式
通过容器查询、逻辑属性和渐进增强适配复杂场景
设计尊重 prefers-reduced-motion 的高级动画
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
选择器、级联、继承、优先级与 Cascade Layers
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
盒模型、格式化上下文、定位与层叠上下文
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
颜色、排版、相对单位、函数与自定义属性
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Flexbox、Grid、Subgrid 与内容驱动的响应式布局
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
媒体查询、容器查询、逻辑属性与多语言方向
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CSS Nesting、@scope、组件边界与设计令牌
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
transition、transform、animation 与 View Transitions
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Baseline、特性检测、降级和渐进增强
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
不用固定设备宽度也能做出自然换行的卡片布局
能在 DevTools 中追踪一条被覆盖的 CSS 声明
完成一键深浅主题和高对比度检查
让动画在减少动态效果偏好下自动关闭或简化
HANDS-ON PROJECT
动手任务
制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。
交付清单
- ✓桌面与移动端响应式驾驶舱
- ✓颜色、间距、圆角和字号设计令牌
- ✓深浅主题及减少动态效果模式
- ✓一页组件在不同容器尺寸下的状态展示
MINIMUM RUNNABLE CODE
使用容器查询的自适应商务卡片
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root { color-scheme: light dark; --brand: #16a3b6; }
.shell { container-type: inline-size; max-width: 48rem; margin: 2rem auto; }
.card { padding: 1.25rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 1rem; }
.metric { color: var(--brand); font: 700 2rem/1.1 system-ui; }
@container (width >= 32rem) {
.card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
.card { transition: transform 180ms ease; }
.card:hover { transform: translateY(-4px); }
}
</style>
<main class="shell">
<article class="card">
<div><h1>季度增长</h1><p>由容器宽度决定布局，而不是猜设备尺寸。</p></div>
<p class="metric">+28%</p>
</article>
</main>
</html>先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 不用固定设备宽度也能做出自然换行的卡片布局
- 能在 DevTools 中追踪一条被覆盖的 CSS 声明
- 完成一键深浅主题和高对比度检查
- 让动画在减少动态效果偏好下自动关闭或简化
改变约束，验证你真的理解
- 不看教程，独立完成：用级联、继承和优先级解释最终样式来自哪里
- 不看教程，独立完成：使用 Flexbox 与 Grid 完成常见一维和二维布局
- 不看教程，独立完成：建立设计令牌、深浅主题和可复用组件样式
- 不看教程，独立完成：通过容器查询、逻辑属性和渐进增强适配复杂场景
- 不看教程，独立完成：设计尊重 prefers-reduced-motion 的高级动画
把实验变成能交付的工程
- 桌面与移动端响应式驾驶舱
- 颜色、间距、圆角和字号设计令牌
- 深浅主题及减少动态效果模式
- 一页组件在不同容器尺寸下的状态展示
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
用固定高度容纳长度不可控的文字
到处添加 !important 掩盖级联问题
只按某几款手机尺寸写媒体查询
为了炫技添加影响阅读、晕动或性能的动画
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
从级联和盒模型出发，逐步构建响应式布局、设计令牌和动态效果。重点不是记属性，而是学会让一套样式在不同内容、容器、设备和用户偏好下都稳定工作。
Q02如果只能保留三个验收结果，应该保留什么？＋
桌面与移动端响应式驾驶舱；颜色、间距、圆角和字号设计令牌；深浅主题及减少动态效果模式
Q03学习过程中最需要主动避免什么？＋
用固定高度容纳长度不可控的文字；到处添加 !important 掩盖级联问题；只按某几款手机尺寸写媒体查询；为了炫技添加影响阅读、晕动或性能的动画
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“制作企业数据驾驶舱和组件陈列页，要求组件在页面、侧栏和弹窗等不同容器中自动调整，而不是依赖大量页面级断点。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：用级联、继承和优先级解释最终样式来自哪里
- □核心机制已用最小实验验证：不用固定设备宽度也能做出自然换行的卡片布局
- □风险已检查：用固定高度容纳长度不可控的文字
- □风险已检查：到处添加 !important 掩盖级联问题
- □风险已检查：只按某几款手机尺寸写媒体查询
- □风险已检查：为了炫技添加影响阅读、晕动或性能的动画
- □交付物可复现：桌面与移动端响应式驾驶舱
- □交付物可复现：颜色、间距、圆角和字号设计令牌
- □交付物可复现：深浅主题及减少动态效果模式
- □交付物可复现：一页组件在不同容器尺寸下的状态展示
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。