CSS教程

面向秋招与真实 Web 开发的 CSS 教程体系，覆盖选择器与层叠、值与单位、Box Model、Formatting Context、Flex、Grid、响应式、动画、Design System、工程化、调试与性能。

CSS 学习路线、课程边界与企业开发定位

本章覆盖：CSS 在 HTML / CSS / JavaScript 三层中的职责；CSS 的核心不是“记属性”，而是理解规则如何匹配、如何竞争、如何生成布局；秋招与企业开发高价值主线：选择器 → Cascade → Box Model → Formatting Context → Position → Flex → Grid → Responsive → 工程治理；CSS 与 HTML 语义结构的协作；CSS 与 DOM、浏览器 Rendering Engine 的关系；CSS 与 Vue / React / 组件库 / Design System 的关系；CSS 与 Sass、CSS Modules、Tailwind 等工程方案的边界；学习方法：最小页面实验、DevTools 检查、布局复现、故障定位、响应式验收；学完后的去向：JavaScript、Vue/React、前端工程化、组件库与真实业务页面开发。

CSS 的定位、发展与现代 CSS 模块化标准体系

本章覆盖：Cascading Style Sheets 的含义；CSS 是声明式样式语言；CSS1 / CSS2 / CSS2.1 与现代 CSS Modules 的历史关系；为什么现代 CSS 不再简单使用“CSS3 / CSS4”描述整个语言版本；CSS Working Group 与模块化规范；浏览器实现与规范的区别；Web Platform Baseline / browser compatibility 的意义；新 CSS 特性进入生产前需要同时看规范状态、兼容性与业务收益。

基础选择器：Type、Class、ID 与 Universal

本章覆盖：type selector；class selector；ID selector；universal selector `*`；多 class 元素；class 作为企业样式主要挂载点；ID 选择器高 specificity 的维护成本；选择器与 HTML 结构的耦合程度；命名清晰比“选择器越短越高级”更重要。

CSS Value、Keyword 与全局值模型

本章覆盖：CSS property value 的基本类型；keyword；number；integer；percentage；dimension；string；URL；global values；property 的 initial value / computed value 基础；invalid at computed-value time 只建立认知；查 MDN 时关注 Applies to / Inherited / Initial value / Computed value。

CSS Box Model：content、padding、border、margin

本章覆盖：content box；padding box；border box；margin；width / height；box 的外部尺寸；background 绘制区域基础；DevTools Box Model；页面尺寸错位首先回到 box model 排查。

文本颜色、对齐、装饰与基础排版

本章覆盖：`color`；`text-align`；`text-decoration`；`text-transform`；`text-indent`；`text-shadow`；`vertical-align` 的真实适用边界；文本可读性；不用大量空格实现排版。

position：static、relative、absolute、fixed、sticky

本章覆盖：`position`；static；relative；absolute；fixed；sticky；inset / top / right / bottom / left；positioned element；元素是否仍占 normal flow 空间；选错 position 是常见布局 bug 来源。

Flex Formatting Context、Flex Container 与 Flex Item

本章覆盖：`display: flex`；`inline-flex`；flex container；flex item；direct child；anonymous flex item 的基础认知；main axis；cross axis；writing mode 对 axis 的影响；Flexbox 适合一维布局的原因。

Grid Container、Grid Item、Track、Line 与 Cell

本章覆盖：`display: grid`；grid container；grid item；grid line；row / column；track；cell；area；explicit grid；implicit grid；Grid 适合二维布局的原因。

Responsive Design 的核心模型：流式优先，而不是设备列表

本章覆盖：responsive design；fluid layout；flexible media；media queries；content-first；mobile-first；breakpoint 应由内容断裂点驱动；不为每个手机型号写 breakpoint；progressive enhancement；page vs component responsiveness。

transform：translate、scale、rotate 与 coordinate space

本章覆盖：`transform`；translate；scale；rotate；skew 的低频定位；transform function 顺序；`transform-origin`；transform 不按 normal flow 重新排版的关键认知；transform 建立 stacking context 的影响；hover / active 微交互。

CSS 命名、作用域与可维护 Selector

本章覆盖：semantic class name；component class；utility class；state class；`is-*` / `has-*` 命名思路；避免样式依赖深层 DOM；避免 ID 作为常规组件样式；selector depth；low specificity；页面级样式与组件级样式边界。

企业登录与注册页面响应式样式

本章覆盖：页面居中与最大宽度；form spacing；input / button state；focus-visible；validation state；password field layout；Flex / Grid；mobile-first；dark mode 基础；200% zoom；错误信息不能只依赖颜色；对接 HTML 表单结构，不使用 JavaScript 业务逻辑。

CSS 如何进入页面：外部、内部与内联样式

本章覆盖：`<link rel="stylesheet">`；`<style>`；`style=""`；external stylesheet；internal stylesheet；inline style；三种方式的工程使用边界；浏览器加载外部 CSS 的基本过程；stylesheet MIME Type 基础；为什么企业项目优先维护独立或组件化样式而不是堆内联 style。

Attribute Selector 与企业表单状态选择

本章覆盖：`[attr]`；`[attr=value]`；`^=`；`$=`；`*=`；case sensitivity flag 的基础认知；`input[type="..."]`；`data-*` 与属性选择器；属性选择器的适用场景；不把业务状态全部滥塞进选择器。

绝对长度与相对长度单位

本章覆盖：`px`；`cm` / `mm` / `in` 只建立边界认知；`em`；`rem`；`%`；`ch`；`ex` 的低频定位；字体相关单位与 layout 单位的区别；企业 UI 中 px、rem、em 的实际选择；不存在“一律禁止 px”的绝对规则。

box-sizing：content-box 与 border-box

本章覆盖：`box-sizing`；content-box；border-box；width 在两种模型中的含义；`* { box-sizing: border-box }`；pseudo-element 同步 box-sizing；form controls 与 box sizing；企业项目为什么通常采用 border-box；不把 border-box 误解为“没有 padding / border”。

font-family、字体栈与系统字体

本章覆盖：`font-family`；generic family；fallback font stack；system font stack；字体不可用时 fallback；中英文字体混排；emoji font；web-safe 不等于只能使用少数字体；设计稿字体与用户系统字体差异。

Absolute Positioning 与 Containing Block

本章覆盖：absolute 元素脱离 normal flow；containing block；nearest positioned ancestor；inset offsets；width / height auto 的基础行为；absolute centering 的旧方案；badge / overlay / close button 场景；不用 absolute 做正常页面主布局。

flex-direction、flex-wrap 与主轴结构

本章覆盖：row；row-reverse；column；column-reverse；`flex-wrap`；nowrap；wrap；wrap-reverse；`flex-flow`；DOM 顺序与 visual order；不通过 reverse 破坏可访问阅读顺序。

grid-template-columns / rows 与 Track Sizing

本章覆盖：`grid-template-columns`；`grid-template-rows`；fixed track；percentage；`fr`；min-content / max-content；`auto`；track sizing 的高层认知；`1fr` 不是简单“容器百分比”；gap 与 track 的关系。

Media Query 基础

本章覆盖：`@media`；width / height；`min-width`；`max-width`；modern range syntax 的认知；orientation；media type 的现代使用边界；logical operators；mobile-first min-width；breakpoint ordering；与 HTML viewport meta 的协作。

2D / 3D Transform 的使用边界

本章覆盖：translateZ；rotateX / Y；perspective；transform-style；backface-visibility；card flip；3D UI 的维护与可用性；企业后台不需要为了炫技大量 3D；重点理解 transform 与 composite / stacking 的关系。

BEM 与组件化 CSS 架构思想

本章覆盖：Block；Element；Modifier；BEM naming；namespace；component ownership；modifier vs state；BEM 解决的是全局命名 / 结构问题，不是 CSS 语法；不需要机械写超长 class；了解 BEM 以便阅读传统企业前端项目。

B 端后台管理页面 Shell

本章覆盖：header；sidebar；main content；sticky / fixed 的选型；Grid / Flex 组合；toolbar；filter form；data table container；responsive collapse；overflow；z-index scale；modal overlay 基础；不使用 absolute 拼主布局。

CSS Rule、Selector、Declaration 与 Property / Value

本章覆盖：rule set；selector；declaration block；property；value；declaration；semicolon；comments；CSS whitespace；invalid declaration 的浏览器容错；unknown property / invalid value 的忽略机制；“某条 CSS 没生效”首先区分未匹配与声明无效。

Combinator：后代、子代、兄弟关系

本章覆盖：descendant combinator；child combinator `>`；next-sibling `+`；subsequent-sibling `~`；DOM 结构与 selector 的对应；深层 descendant selector 的耦合风险；组件内部合理控制 selector 深度；结构变化导致样式失效的典型问题。

Viewport Units 与现代动态视口单位

本章覆盖：`vw`；`vh`；`vmin`；`vmax`；mobile browser address bar 导致的 viewport 高度问题；`svh`；`lvh`；`dvh`；全屏页面 / modal / hero 区的使用；与 `%` 高度的区别；兼容性与 fallback。

Width、Height、Min/Max 与 Intrinsic Sizing

本章覆盖：`width`；`height`；`min-width`；`max-width`；`min-height`；`max-height`；`auto`；intrinsic size；min-content；max-content；fit-content；内容撑开与固定尺寸的差异；防止组件被内容挤爆的基本策略。

font-size、font-weight、font-style 与 line-height

本章覆盖：`font-size`；`font-weight`；`font-style`；`line-height`；unitless line-height；relative font sizing；`rem` / `em`；readable line height；字重可用值取决于字体资源；继承造成的字号 / 行高问题。

Fixed 与 Sticky 的真实应用

本章覆盖：fixed 相对 viewport / containing block 的边界；sticky；scroll container；sticky threshold；`top`；sticky 为什么“不生效”；fixed header；sticky sidebar；移动端 viewport 与 fixed 元素的注意事项；sticky 与 overflow ancestor 的关系。

justify-content、align-items、align-self 与 align-content

本章覆盖：main-axis alignment；cross-axis alignment；`justify-content`；`align-items`；`align-self`；`align-content`；start / end / center；space-between / space-around / space-evenly；stretch；baseline；align-content 只有多行 / 可用空间时才有意义。

repeat、minmax 与 auto-fill / auto-fit

本章覆盖：`repeat()`；`minmax()`；`auto-fill`；`auto-fit`；responsive card grid；`minmax(min, 1fr)`；无 media query 的流式网格；auto-fit vs auto-fill；企业 dashboard / card list 高频模式。

用户偏好与设备能力 Media Features

本章覆盖：`prefers-color-scheme`；`prefers-reduced-motion`；`prefers-contrast`；`hover`；`pointer`；any-hover / any-pointer 的边界；color gamut 的高层认知；dark mode；reduced motion accessibility；不仅根据屏幕宽度做响应式。

Transition：状态变化的平滑过渡

本章覆盖：`transition-property`；`transition-duration`；`transition-timing-function`；`transition-delay`；shorthand；animatable property；hover / focus / open state；不使用 `transition: all` 的维护与性能问题；CSS transition 与 JavaScript state class 的协作。

OOCSS、SMACSS、ITCSS 与架构思想比较

本章覆盖：separation of structure and skin；reusable object；category / module / state；ITCSS 分层；specificity management；architecture pattern 的历史价值；现代组件化框架减少但没有消除 CSS 架构问题；不要求死记所有方法论规则；重点吸收低耦合、分层与可覆盖性思想。

响应式卡片列表与 Dashboard

本章覆盖：CSS Grid；repeat / minmax；auto-fit；Flex inside card；aspect-ratio；object-fit；gap；clamp typography；responsive without excessive breakpoints；card container query；skeleton / loading visual state；long text / overflow 验收。

浏览器从 HTML + CSS 到页面的高层渲染链路

本章覆盖：HTML → DOM；CSS → CSSOM 的高层认知；style calculation；box generation；layout；paint；composite；CSS 对 Layout / Paint / Composite 的不同影响；Rendering Pipeline 只建立调试与性能认知，不进入浏览器内核实现细节；DevTools Elements / Styles / Computed 与渲染链路的对应。

Pseudo-class：链接、表单与结构状态

本章覆盖：`:hover`；`:focus`；`:focus-visible`；`:active`；`:visited` 的安全限制基础；`:checked`；`:disabled`；`:enabled`；`:required`；`:valid` / `:invalid`；`:first-child` / `:last-child`；`:nth-child()`；状态伪类与 JavaScript class 切换的职责边界。

百分比尺寸、Containing Block 与尺寸解析

本章覆盖：percentage width；percentage height；percentage margin / padding 的解析基础；containing block；definite size；height 百分比“为什么不生效”的典型原因；absolute positioned element 的 containing block；viewport 与 containing block 的区别；通过 DevTools 判断真实 reference box。

Normal Flow：Block 与 Inline Formatting 基础

本章覆盖：normal flow；block-level box；inline-level box；block flow direction；inline flow；line box 高层认知；inline 元素 width / height 行为；block 元素默认占用可用 inline size 的高层理解；DOM 顺序与 normal flow；Flex / Grid / Position 都是在默认流基础上的特定布局机制。

Web Fonts 与 @font-face

本章覆盖：`@font-face`；font-family；`src`；local / url；WOFF2；font-weight；font-style；unicode-range 的高层认知；`font-display`；fallback / swap；字体加载与 CLS / FOIT / FOUT；授权与字体文件体积的工程问题。

z-index 与 Stacking Context

本章覆盖：painting order 高层概念；`z-index`；stacking context；哪些常见属性会建立 stacking context；子元素不能凭巨大 z-index 穿越父 stacking context；modal 被 header 压住的典型问题；transform / opacity 等创建 stacking context；DevTools 排查层叠；设计系统统一 z-index scale。

gap：组件间距的现代方案

本章覆盖：`gap`；row-gap；column-gap；Flex gap；Grid gap；margin spacing 与 gap 的区别；list / toolbar / card grid 中使用 gap；gap 不作用于容器外缘；减少相邻元素 margin 规则；Design Token + gap。

Grid Line Placement 与 Span

本章覆盖：line number；negative line；`grid-column`；`grid-row`；`span`；start / end；item 跨行跨列；source order；automatic placement；页面主区 / sidebar / card span。

Container Query：组件根据容器而不是 viewport 响应

本章覆盖：`container-type`；`container-name`；`@container`；size query；inline-size；component-local responsiveness；card 放在不同容器中的自适应；dashboard widget；container query vs media query；viewport layout 与 component layout 的职责划分。

Timing Function 与自然交互节奏

本章覆盖：`linear`；`ease`；`ease-in`；`ease-out`；`ease-in-out`；cubic-bezier；`steps()`；motion duration；entering / exiting 的常见节奏；Design System motion token；动画服务于状态反馈而不是抢注意力。

Sass / SCSS：企业预处理器的核心边界

本章覆盖：Sass / SCSS 的定位；variables；nesting；mixin；function；partial / module 的高层认知；build-time preprocessing；Sass variable vs CSS custom property；nesting 深度风险；现代 CSS 已原生覆盖部分历史 Sass 能力；新项目是否需要 Sass 应看团队和工程需求。

Vue / React 风格组件样式系统原型

本章覆盖：global token；component class；variant；size；state；CSS custom properties；scoped style / CSS Modules 思想；component container query；dark theme；reduced motion；focus ring；class naming；low specificity；不依赖具体框架运行即可完成 CSS 架构设计。

User Agent Style 与 CSS Reset / Normalize 的问题来源

本章覆盖：browser default stylesheet；user-agent styles；heading、button、input 等默认样式；不同浏览器默认值差异；reset CSS 的目标；normalize 思路；`box-sizing` 全局策略；不要机械清空所有原生样式；Form Control 默认样式与可访问性的关系。

:not()、:is()、:where() 与选择器组合

本章覆盖：`:not()`；`:is()`；`:where()`；selector list；简化重复选择器；`:is()` 的 specificity 行为；`:where()` 零 specificity 的工程价值；reset / component foundation 中低 specificity 策略；避免为了“炫技”写难读的复合选择器。

min/max/clamp 与流式尺寸

本章覆盖：`min()`；`max()`；`clamp()`；responsive typography；fluid spacing；不使用大量 breakpoint 也能完成连续缩放；min/max 与 CSS unit 混用；`clamp(min, preferred, max)`；业务组件尺寸上下界；readable formula 优先于复杂炫技表达式。

display 与 Box Generation

本章覆盖：`display`；`block`；`inline`；`inline-block`；`none`；outer display type；inner display type；`flow-root`；`contents` 的定位与可访问性边界；`display: flex`；`display: grid`；display 改变的是生成 box / formatting context，不是 HTML 语义。

文本换行、溢出与长内容处理

本章覆盖：`white-space`；`overflow-wrap`；`word-break`；`hyphens`；`text-overflow`；ellipsis；single-line ellipsis；multi-line truncation 的工程方案与兼容边界；URL / 长英文单词撑爆卡片；中英文换行差异；截断不应隐藏关键业务信息。

Float 的历史定位与现代使用边界

本章覆盖：`float`；left / right；文本环绕；float 从普通流中的特殊行为；旧式多列布局历史；Flex / Grid 已替代多数 float 布局；新闻图片文字环绕仍是合理场景；不用 float 做现代应用主布局。

flex-basis、flex-grow 与剩余空间分配

本章覆盖：`flex-basis`；main size；`flex-grow`；positive free space；grow ratio；`flex: 1`；flex shorthand；basis 0 与 auto 的差异；不把 flex-grow 理解成“最终宽度比例”；结合内容尺寸理解空间分配。

Named Lines 与 Grid Template Areas

本章覆盖：named line；`grid-template-areas`；`grid-area`；readable page layout；header / sidebar / main / footer；breakpoint 下重定义 area；area 必须形成矩形；template area 与 HTML DOM 顺序；小型页面布局的可维护性。

Container Query Units 与现代组件尺寸

本章覆盖：`cqw`；`cqh`；`cqi`；`cqb`；`cqmin`；`cqmax`；fluid component typography；component spacing；query container dependency；fallback；不必为简单组件强行使用 cq units。

@keyframes 与 CSS Animation

本章覆盖：`@keyframes`；animation-name；duration；timing-function；delay；iteration-count；direction；fill-mode；play-state；multiple animations；loading / skeleton / attention feedback；keyframe 与 transition 的选择。

CSS Modules、Vue scoped CSS 与样式隔离

本章覆盖：global CSS problem；CSS Modules；locally scoped class；generated class name；Vue `<style scoped>`；scoped selector 转换的高层认知；deep selector 的风险；global style / component style / token style；组件隔离不能替代良好命名与 token 设计；React / Vue 项目中的真实使用位置。

Design System：Button、Input、Card、Modal 样式层

本章覆盖：primitive token；semantic token；color；spacing；radius；typography；shadow / elevation；z-index；button variants；input states；card layout；modal overlay；disabled / focus / error；dark mode；CSS API 一致性；避免每个页面自己重新定义视觉规则。

CSS 文件组织、@import 与资源路径

本章覆盖：一个页面加载多个 stylesheet；CSS 中的相对 URL；`url()`；字体 / 背景图片资源路径；`@import`；`<link>` 与 `@import` 的加载和维护差异；生产项目中避免不必要的深层 @import 链；构建工具处理 CSS 资源路径的高层认识；部署后 CSS 资源 404 的常见排查方式。

:has() 与关系型选择

本章覆盖：`:has()`；根据后代或兄弟状态选择父级 / 前序元素；form group 根据 invalid input 改变样式；card 根据内部内容改变布局的场景；`:has()` 与 JavaScript DOM 查询 / 状态 class 的边界；selector 可读性与复杂度；浏览器兼容性检查；不把复杂业务状态机搬进 CSS selector。

calc() 与 CSS 数值计算

本章覆盖：`calc()`；不同单位混合计算；`100% - fixed size`；custom properties 与 calc；运算符空格规则；nested calc 的现代处理；layout 中可读公式；calc 不能取代正确 Flex / Grid 设计；避免把整个布局变成手工坐标计算。

Margin Collapsing：外边距折叠

本章覆盖：vertical margin collapsing；sibling margins；parent / first child；empty block；为什么 horizontal margin 不同样 collapse；BFC / flow-root 等对 collapse 的影响；“margin 明明 20px 为什么不是 40px”；不靠魔法数字修复 margin collapse；在现代组件布局中优先使用 gap 的场景。

Background：颜色、图片、尺寸与定位

本章覆盖：`background-color`；`background-image`；`background-repeat`；`background-position`；`background-size`；`cover`；`contain`；multiple backgrounds；shorthand；content image 与 decorative background 的语义区别；背景图不应替代需要 alt 的内容图片。

Clear、Containing Floats 与 Clearfix 历史

本章覆盖：`clear`；float 父容器高度问题；clearfix 思路；BFC containment；`display: flow-root`；为什么 flow-root 是更直接的现代方案；阅读旧项目时理解 clearfix；新项目不应机械复制 clearfix snippet。

flex-shrink、min-size 与“为什么元素不肯缩小”

本章覆盖：`flex-shrink`；negative free space；shrink factor；automatic minimum size；`min-width: auto`；`min-width: 0`；长文本导致 flex item overflow；图片 / input 等 item 的缩小问题；高频企业 bug：左右布局中主内容被撑爆；用 DevTools 检查 flex item size。

Grid Auto Placement 与 Implicit Grid

本章覆盖：auto-placement algorithm 高层认知；implicit rows / columns；`grid-auto-rows`；`grid-auto-columns`；`grid-auto-flow`；dense 的边界；动态列表；DOM order / focus order；不为视觉填洞破坏内容顺序。

Logical Properties、Writing Modes 与国际化布局

本章覆盖：inline / block axis；`margin-inline`；`margin-block`；`padding-inline`；`padding-block`；`inset-inline`；`inline-size`；`block-size`；`border-inline`；LTR / RTL；writing mode；国际化布局；物理属性与逻辑属性的选择边界。

prefers-reduced-motion 与可访问动画

本章覆盖：`prefers-reduced-motion`；motion sensitivity；去除非必要位移动画；保留必要状态反馈；animation duration / transform 降级；Design System 全局 motion policy；第三方组件动画审查；不强制所有用户观看复杂动效。

Utility-first CSS 与 Tailwind 思想边界

本章覆盖：utility class；atomic CSS；Tailwind 的定位；composition in markup；design token / config；responsive utility；state utility；utility-first 的效率与 HTML class 密度 trade-off；与 component CSS 并不是绝对互斥；企业项目按团队技术栈学习，不把框架 API 混入 CSS 核心语义；理解原生 CSS 后再使用 utility framework。

星雨笔录式真实页面 CSS 重构与验收

本章覆盖：从现有页面识别 normal flow / Flex / Grid / Position；移除 magic number 和无必要 absolute；统一 box-sizing；建立 token；控制 specificity；优化 responsive breakpoint；long content / zoom / mobile 验收；Flex `min-width: 0` 等真实故障修复；stacking context 排查；image aspect-ratio / object-fit；prefers-reduced-motion；DevTools Styles / Computed / Layout / Performance；形成可复用的页面与组件样式规范。

DevTools 样式调试入门：Styles、Computed 与 Box Model

本章覆盖：Elements 面板；Styles pane；matched rules；user agent stylesheet；被划掉的 declaration；Computed pane；inherited styles；Box Model inspector；临时修改属性；查看规则来源文件与行号；从“颜色没生效”定位到 selector / cascade / invalid value；从“尺寸不对”定位到 box model。

Pseudo-element：生成内容与装饰层

本章覆盖：`::before`；`::after`；`content`；`::first-letter`；`::first-line`；`::selection`；装饰性图形；icon / badge 辅助表现；generated content 不应承载关键业务信息；pseudo-element 与 stacking / positioning 的关系。

CSS Color 基础：hex、rgb、hsl 与 alpha

本章覆盖：named colors；hex；`rgb()`；alpha；`hsl()`；transparent；currentColor；颜色值与 opacity 的区别；文本 / border / icon 继承 currentColor；设计系统中统一 color token 的必要性。

Block Formatting Context（BFC）

本章覆盖：BFC 的定义和作用；哪些情况建立新的 BFC 的常见来源；`display: flow-root`；float containment；margin collapsing 隔离；与浮动元素的排列关系；overflow 触发 BFC 的历史技巧与副作用；BFC 高频面试题的正确理解；不把 BFC 当成“清除浮动口诀”。

Gradient：线性、径向与圆锥渐变

本章覆盖：`linear-gradient()`；`radial-gradient()`；`conic-gradient()`；color stop；angle；repeated gradient 的基础；gradient 是 generated image；UI 背景 / skeleton / decorative effect；不把复杂渐变替代真实设计资源的所有场景；兼容性与可读性。

Overflow、Scroll、Overscroll 与滚动区域设计

本章覆盖：overflow revisit；scroll container；`overscroll-behavior`；nested scroll；modal body scroll；`scroll-behavior`；fixed / sticky 与滚动容器；移动端滚动体验边界；CSS 与 JavaScript scroll control 的职责区分。

order、auto margin 与常见 Flex 模式

本章覆盖：`order`；visual order vs DOM order；`margin-left: auto` / logical auto margin；toolbar 两端布局；header navigation；button group；vertical center；footer push-down 的 flex page pattern；不用 order 修复错误 DOM 结构。

Grid Alignment

本章覆盖：`justify-items`；`align-items`；`place-items`；`justify-content`；`align-content`；`place-content`；`justify-self`；`align-self`；item alignment vs whole grid alignment；baseline alignment；与 Flex alignment API 的共性。

响应式 Typography、Spacing 与 Content Width

本章覆盖：`clamp()`；rem；viewport / container units；readable line length；`max-inline-size`；fluid type scale；fluid spacing；Design Token + responsive values；标题不能无限随 viewport 放大；内容可读性优先于“完全按设计稿像素缩放”。

CSS Animation Performance：Layout、Paint 与 Composite

本章覆盖：layout-triggering changes 高层认知；paint；composite；transform / opacity 常见合成优势；`will-change`；will-change 不能全局滥用；large blur / shadow / filter 成本；DevTools Performance 的基础观察；先测量再优化；动画性能与设备差异。

Component Library 与 Design System 的 CSS 层

本章覆盖：design token；component token；base / variant / size / state；theming；dark mode；density；responsive component；focus state；z-index scale；spacing system；typography scale；CSS API 与组件 props 的对应；Ant Design / Element Plus 等组件库样式覆盖的原则性认知。

Cascade：浏览器如何决定最终声明

本章覆盖：cascade 的作用；relevance；origin；importance；cascade layer；specificity；scope proximity 的现代认知；source order；CSS 冲突不是简单“后写覆盖前写”；用 DevTools 读取 cascade 结果。

现代颜色模型与工程使用边界

本章覆盖：`hwb()` 的定位；`lab()`；`lch()`；`oklab()`；`oklch()`；wide-gamut color 基础；modern color spaces 的优势高层认识；兼容性与 Design System 引入成本；核心课程重点仍是 rgb / hsl / currentColor 与 token 思维；新颜色模型作为现代工程能力，不要求死记参数。

Overflow 与滚动容器

本章覆盖：`overflow`；`visible`；`hidden`；`clip`；`auto`；`scroll`；overflow-x / overflow-y；scroll container；clipping；长文本 / 大图片造成 overflow；滚动区域的键盘与可访问性边界；避免用 hidden 粗暴掩盖真实布局 bug。

Border、Outline、Radius 与 Focus Ring

本章覆盖：`border`；border width / style / color；`border-radius`；`outline`；outline 不占布局空间；focus outline；`outline-offset`；不因为视觉设计随意 `outline: none`；focus-visible 的协作；component radius token。

CSS Multi-column 与特殊文本布局

本章覆盖：`column-count`；`column-width`；`column-gap`；column rule；fragmentation 高层认知；文章 / 文档场景；企业应用 UI 中低频；不用 multi-column 替代 Grid 的卡片布局；作为 COMMON 而不是核心日常布局工具。

Flex Item 尺寸计算与常见面试模型

本章覆盖：hypothetical main size 高层认知；base size；free space；grow / shrink；intrinsic content contribution；min/max constraint；percentage / fixed / flex basis 混合；`flex: 1 1 0`；`flex: 0 0 auto`；“flex:1 到底做了什么”；不要求背完整规范算法，但要能解释常见结果。

Subgrid 与组件对齐

本章覆盖：`subgrid`；child grid 复用 parent track；nested card layout；列表多行内容对齐；form label / content alignment；subgrid 的价值；fallback / compatibility；不在简单布局中滥用 subgrid；与普通 nested grid 的区别。

响应式图片的 CSS 协作

本章覆盖：`max-width: 100%`；`height: auto`；object-fit；aspect-ratio；picture / srcset 属于 HTML；CSS 控制显示尺寸，HTML 控制资源候选；background image responsive 边界；art direction 与 CSS layout 的关系；卡片封面 / avatar / hero 实战；图片性能与布局稳定性。

交互状态系统：hover、focus、active、disabled、loading

本章覆盖：hover state；focus state；focus-visible；active / pressed；disabled；selected；loading；error / success；state selector / class / data attribute；CSS 表现状态与 JavaScript 业务状态的边界；不仅通过颜色表达状态；企业组件库需要统一 state design。

CSS Debugging：从“样式不对”建立系统排查链

本章覆盖：selector 是否命中；declaration 是否 valid；cascade 是否被覆盖；specificity；inheritance；computed value；box model；containing block；formatting context；flex / grid sizing；overflow；stacking context；browser compatibility；DevTools Flex / Grid overlay；最小复现；不先乱加 `!important`。

Specificity：优先级计算与维护策略

本章覆盖：ID / CLASS / TYPE 三类权重；inline style；pseudo-class 与 pseudo-element 的权重；`:is()` / `:not()` / `:has()` 的 specificity；`:where()` 零 specificity；同 specificity 时 source order；inherited value 与直接命中规则的区别；specificity war；低 specificity 组件样式策略；不用堆选择器解决架构问题。

CSS Custom Properties：变量、作用域与继承

本章覆盖：`--custom-property`；`var()`；fallback；custom property 默认继承；`:root`；component scope；theme token；spacing / color / radius token；CSS 变量与 Sass 变量的运行时差异；JavaScript 动态修改 custom property 的接口；自定义属性不是普通预处理器文本替换。

aspect-ratio、object-fit 与媒体尺寸控制

本章覆盖：`aspect-ratio`；replaced element 基础；img / video intrinsic ratio；`object-fit`；`cover`；`contain`；`object-position`；卡片封面与头像裁切；响应式媒体占位；防止 CLS 的尺寸设计。

Box Shadow、Opacity、Filter 与视觉层级

本章覆盖：`box-shadow`；inset；multiple shadows；`opacity`；opacity 对整个元素及子元素的影响；`filter`；blur / brightness 等常见 filter；shadow 与 Design System elevation；大面积 blur / filter 的性能风险；不用 opacity 解决只需透明背景的需求。

布局技术选型：Normal Flow、Position、Flex 还是 Grid

本章覆盖：内容自然纵向排列：normal flow；单轴组件排列：Flex；行列二维关系：Grid；局部叠加：position；文本环绕：float；page layout vs component layout；根据内容关系选布局算法；不以“哪个更新”作为选择依据；面试中能解释为什么选 Flex / Grid 比死背属性更重要。

企业 Flex 布局实战与故障排查

本章覆盖：header / nav；sidebar row；form row；card action area；button group；chip / tag list；equal-height card；wrapping toolbar；text ellipsis inside flex；`min-width: 0`；overflow / gap / alignment；DevTools Flex overlay；从设计稿识别一维布局模式。

Flex 与 Grid 选型及企业二维布局实战

本章覆盖：Flex: content-first / one-dimensional；Grid: layout-first / two-dimensional；Dashboard；admin page shell；responsive card list；form grid；pricing table；gallery；nested Flex + Grid；不是“Flex 和 Grid 二选一”；一个页面同时使用多种布局上下文；DevTools Grid overlay 与 track 检查。

Modern Layout Patterns：无断点与少断点布局

本章覆盖：`minmax()`；auto-fit；`clamp()`；Flex wrap；intrinsic sizing；`max-content`；`fit-content`；responsive sidebar；RAM / Reflow / Sidebar 等模式的思想；用内容约束让浏览器计算；能不用 media query 时不机械增加 breakpoint。

CSS Performance、Critical CSS 与渲染成本

本章覆盖：CSS 是 render-blocking resource 的高层认知；unused CSS；large stylesheet；critical CSS 的概念；code splitting；route / component style；selector performance 不做过时微优化；layout / paint / composite 成本；font / background asset；animation cost；Lighthouse / Coverage / Performance；先关注资源体积、阻塞、布局和动画瓶颈。

!important 的真实优先级与使用边界

本章覆盖：`!important`；importance 与 origin；important styles 与 cascade layers；`!important` 不是“最大 specificity”；为什么大量 important 会造成维护灾难；第三方样式覆盖的真实场景；utility / accessibility 等少数合理场景；DevTools 中识别 important 冲突；优先通过架构、层、scope 或选择器控制解决问题。

@property 与类型化自定义属性的边界

本章覆盖：`@property`；syntax；inherits；initial-value；typed custom properties；控制继承；可动画 custom property；Design System / animation 的高级场景；兼容性核验；不作为初学 CSS 的必背 API。

Formatting Context 总图：Flow、Flex、Grid 与定位系统

本章覆盖：formatting context 的整体概念；block formatting context；inline formatting context 的高层认知；flex formatting context；grid formatting context；formatting context 决定子项布局算法；Positioning scheme 与 formatting context 的区别；normal flow → float → position → flex → grid 的演进关系；遇到布局问题先判断“当前元素属于哪种布局算法”。

List、Table 与 Form Control 的 CSS 样式边界

本章覆盖：list-style；marker；`::marker`；table border / spacing；`border-collapse`；form control UA style；`appearance`；accent-color；placeholder styling；input / button 跨浏览器差异；原生控件可访问性；企业组件库“完全重绘控件”所需额外成本。

响应式页面验收与跨设备调试

本章覆盖：DevTools Device Toolbar；viewport size；zoom；text scaling；landscape / portrait；long content；200% zoom 的基础可访问性检查；touch target；hover-dependent UI 风险；横向滚动检查；breakpoint regression；真机测试与模拟器的差异；验收不是只看 375 / 1440 两个截图。

CSS Code Review、兼容性与质量门禁

本章覆盖：页面是否主要使用正确布局机制；selector 是否过度耦合 DOM；specificity 是否可控；是否大量使用 `!important`；Flex / Grid 是否存在不必要 hack；responsive 是否由内容驱动；focus / reduced motion / contrast 基础检查；browser compatibility；Baseline；CSS lint 的高层认知；visual regression testing 的概念；DevTools 验收；不为“支持所有浏览器”牺牲全部现代能力，要明确目标浏览器矩阵。