EXPLORE / CSS
CSS 系统教程
读懂原理，动手实践，每次前进一小步。
01—03 · 样式规则
理解选择器、层叠与盒模型，学会定位样式来源。
04—07 · 排版与布局
组合字体、Flex、Grid和定位解决真实布局。
08 · 响应式验收
用窄屏、缩放、长文本验证布局边界。
09—14 · 组件与排错
掌握状态、主题变量、动画、滚动容器和容器查询。
建议学习方式：先阅读机制，再运行示例；完成练习后展开参考答案。每章都有验证步骤与常见边界。
01 · 选择器、状态与样式组织
选择合适的选择器，区分后代、直接子元素和状态，并把样式移到可复用的文件。
02 · 层叠、继承与优先级
按顺序诊断样式冲突，而不是盲目增加 !important；解释为什么父元素的颜色能影响子元素。
03 · 盒模型、尺寸与溢出
计算元素总宽度，区分 padding、border 和 margin，解释为什么固定尺寸会导致移动端溢出。
04 · 字体、单位、颜色与可读性
根据用途选择 px、rem、em、百分比与视口单位，并建立可阅读的正文节奏与对比关系。
05 · Flexbox、伸缩与自动最小尺寸
根据主轴和交叉轴安排布局，解释 flex 三个值，并处理长内容导致的布局撑开。
06 · Grid、轨道与二维布局
使用网格轨道建立二维布局，理解 fr、minmax 和自动列数，选择 Flex 或 Grid 时有明确理由。
07 · 定位、滚动容器与层叠上下文
判断 relative、absolute、fixed 和 sticky 的用途，解释为什么更大的 z-index 仍可能被遮挡。
08 · 响应式、内容断点与适配验证
从内容需要选择断点，区分布局适配、触控适配和文字缩放，并形成可重复的验证步骤。
09 · 伪类与伪元素：状态和装饰的边界
为hover、键盘焦点、禁用和错误状态设计一致样式，并把装饰与内容分开。
10 · 自定义属性：主题、作用域与回退
把重复样式值组织为可覆盖的变量，构建局部主题而不复制整套规则。
11 · 过渡与动画：反馈、性能与减少动态
用有限的运动表达交互反馈，并为减少动态偏好提供等价体验。
12 · 溢出与粘性定位：找到真正的滚动容器
定位sticky失效和横向溢出的来源，而不是靠隐藏内容掩盖问题。
13 · 容器查询：让组件适应所在空间
让相同卡片在窄侧栏和宽正文中采用不同布局，而不依赖整个窗口宽度。
14 · 布局排错实战：从症状到最小修复
按尺寸、布局和层叠三个方向排错，并用反例验证修复不是偶然。