CSS
从盒模型到 Grid 布局，从响应式设计到容器查询，从 CSS 变量到原生嵌套。CSS 在 2024-2026 经历了一次能力跃迁。
Topics
盒模型与布局基础
深入理解 CSS 盒模型的四层结构、margin 折叠机制、BFC 的创建条件与应用、Logical Properties 逻辑属性，以及 display 属性的现代双值语法。
CSS 动画与过渡
系统掌握 CSS transition 和 animation 的完整属性、时序函数、@keyframes 语法、animation-fill-mode 的作用时机，以及 transform 和 opacity 的性能优化特性。
CSS Aspect Ratio
系统掌握 CSS aspect-ratio 属性：如何用 aspect-ratio 创建固定比例的容器、实现响应式图像和视频布局。
CSS 背景与边框
深入理解 CSS 背景的完整属性体系、border-radius 的各种写法、border-image 九宫格切片机制、box-shadow 的多层叠加，以及 background-image 和渐变的组合使用。
CSS 优先级与层叠机制
深入理解 CSS 的 Specificity 计算模型、层叠规则、!important 的实际影响，以及浏览器默认样式的运作机制。
CSS 容器查询
深入理解 CSS 容器查询的工作机制、@container 规则、容器类型（size、inline-size、style、state），以及如何用容器查询构建真正的组件级响应式设计。
CSS 自定义属性（CSS 变量）
深入理解 CSS 自定义属性的层叠、继承和计算机制，var() 的语法和备选值，以及如何用 CSS 变量构建可维护的设计系统。
CSS 显示类型与文档流
深入理解 display 属性的所有取值、Box Type 的分类体系、CSS Display Module Level 3 的双值语法，以及 display: contents 的特殊行为。
CSS Houdini 与 CSS-Typed-OM
深入理解 CSS Houdini 的架构：Worklet 的工作机制 Paint API、Layout API、Properties & Values API、Typed OM，以及 Houdini 如何让 CSS 具备可扩展性。
CSS 滤镜与混合模式
系统掌握 CSS 滤镜的十种效果、混合模式的原理与应用、isolation 的层叠隔离作用，以及滤镜和混合模式在现代 UI 开发中的实际场景。
CSS Font Feature Settings
深入理解 CSS 字体特性设置：OpenType 特性、连字（ligatures）、数字样式（oldstyle、tabular）、以及如何用 CSS 控制字体的高级排版特性。
CSS 数学函数
系统掌握 CSS 数学函数：calc() 的运算规则、min/max/clamp 的响应式用法、以及新引入的 abs/sign/round/mod/rem 函数。
CSS Image Rendering
系统掌握 CSS image-rendering 属性：如何控制图像的渲染质量、crisp-edges vs pixelated、以及实际应用场景。
CSS 逻辑属性
深入理解 CSS 逻辑属性与物理属性的区别、writing-mode 和 direction 的作用、以及如何用逻辑属性构建适配多语言和书写方向的布局系统。
CSS Motion 与动画原则
深入理解动画的时间与空间原则：缓动函数的选择、动画时长控制、cubic-bezier 详解、以及如何创建符合用户体验的流畅动画。
CSS 溢出与裁剪机制
深入理解 overflow 的工作机制、overflow: hidden vs overflow: clip 的区别、容器查询的响应式维度、clip-path 与 mask 的实际场景，以及 contain 属性的性能优化价值。
CSS 定位与层叠上下文
系统掌握 CSS position 属性的五个值、包含块的确定规则、层叠上下文的形成条件，以及 z-index 的层叠机制。
CSS 伪类与伪元素
深入理解 CSS 伪类的分类体系（状态、结构、逻辑）、伪元素的本质（实际创建的新元素）、以及 :is() 和 :where() 的特异性差异。
CSS Reset 与 Normalize
系统掌握 CSS Reset 的演进历程、现代最佳实践、以及如何构建适合项目需求的 CSS 基础样式。
CSS 滚动驱动动画
深入理解 CSS 滚动驱动动画机制：scroll() 和 view() 函数、animation-timeline 属性、命名滚动时间线和视图时间线、以及 scroll-timeline 详细用法。
CSS 滚动吸附
深入理解 CSS Scroll Snap 的完整机制：scroll-snap-type、scroll-snap-align、scroll-padding，以及如何构建平滑的轮播和走马灯效果。
CSS 滚动条与滚动行为
深入理解 CSS 滚动条的自定义方式、scrollbar-width 和 scrollbar-gutter 的实际用法、touch-action 的触摸行为控制、overscroll-behavior 的滚动穿透，以及 scroll-snap 的对齐机制。
CSS 选择器与优先级
深入理解 CSS 选择器的匹配机制、优先级（Specificity）计算模型、Cascade 层叠算法，以及 :is()、:where()、:has() 等现代伪类选择器的工程用法。
CSS 形状与几何
深入理解 CSS 形状的各种创建方法：clip-path、border-radius、shape-outside 浮动环绕、shape-margin 形状边距、以及如何用 CSS 创建复杂几何形状。
CSS Subgrid
深入理解 CSS Subgrid 的工作机制：父网格轨道如何被子网格继承、跨多列/行对齐、以及如何用 Subgrid 实现复杂的表格式布局。
CSS 2D/3D 变换
深入理解 CSS transform 的 2D 和 3D 函数、perspective 的视觉效果、transform-style 的 preserve-3d 和 flat、backface-visibility 的 3D 翻转卡片，以及 will-change 的使用和滥用问题。
CSS 排版与字体
系统掌握 CSS 排版的所有关键属性：字体系统、行高与基线、文本对齐、字间距、以及现代字体技术（font-feature-settings、font-display）。
CSS View Transitions
深入理解 CSS View Transitions API：如何创建跨页面和同文档状态切换的平滑过渡动画、view-transition-name 的使用、CSS 伪元素机制，以及实际应用场景。
CSS 层叠与 z-index 机制
深入理解 z-index 的层叠规则、层叠上下文的形成条件、z-index 的比较机制，以及如何正确处理元素的前后覆盖关系。
Flexbox 布局
系统掌握 Flexbox 一维布局模型的核心算法：主轴/交叉轴、flex 简写的三值含义、空间分配机制、对齐体系，以及常见布局模式的最佳实践。
Grid 布局
系统掌握 CSS Grid 二维布局模型：显式网格与隐式网格、fr 单位与 minmax() 的空间分配、auto-fill/auto-fit 的响应式模式、Subgrid 的继承机制，以及 Grid 在页面级布局中的最佳实践。