第25课：CSS 变量（自定义属性）——--*、var()、作用域与暗色模式CSS 变量，正式名称为自定义属性（Custom Properties），是 CSS 原生的变量系统。与预处理器（Sass、Less）的变量不同，CSS 变量在浏览器中动态生效，可以响应级联、继承、媒体查询和 JavaScript 操作。它们是实现主题切换（暗色模式）、设计令牌（Design Tokens）和组件级复用的核心工具。本节课将深入讲解自定义属性的声明、使用、作用域规则，以及如何利用它们构建动态主题系统。
1. 自定义属性的声明与使用自定义属性以 -- 开头，后跟属性名。它必须在一个 CSS 规则块内...
第24课：动画——@keyframes、animation 属性与性能优化过渡（Transition）只能从 A 状态变化到 B 状态，且需要触发器（如悬停）。CSS 动画（Animation）则允许定义多个关键帧、自动播放、循环、暂停、反向等复杂行为，是构建丰富交互动效的核心工具。本节课将深入讲解 @keyframes 关键帧规则、animation 八个子属性的精确控制，以及 CSS 动画性能优化的黄金法则——理解浏览器的渲染流水线，才能写出 60fps 的流畅动画。
1. @keyframes：定义动画的剧本@keyframes 规则用于定义一个动画序列——在各时间点上，元素应具...
第23课：变换与过渡CSS 提供了两种在不借助 JavaScript 的情况下改变元素外观的机制：变换（Transform） 和 过渡（Transition）。变换通过修改元素的坐标空间实现平移、旋转、缩放和倾斜，且不占据布局空间、不触发回流；过渡则让属性值的变化变得平滑，赋予界面细腻的交互感。两者结合，足以构建流畅的交互动效。本节课将逐层解析 transform 的 2D 与 3D 函数、transition 的精细控制，以及贝塞尔曲线背后的时间函数原理。
1. transform 变换：在不破坏布局的情况下改变元素形态transform 属性对元素应用矩阵变换，修改其视觉呈现，但不...
第22课：背景与边框元素的视觉边界由背景和边框共同定义。背景填充内容区与内边距区域，边框勾勒出元素的轮廓，而阴影则赋予元素立体感与层次。这三个看似基础的属性，各自拥有强大的子属性和高级用法——多重背景叠加、渐变生成图像、圆角与椭圆角、内外阴影组合——能够在不依赖任何图片资源的情况下实现丰富的视觉效果。本节课将逐一深入这些属性的语法细节、渲染规则与常见应用场景。
1. background 背景体系background 是一个简写属性，可同时设置八个子属性。其完整语法如下，但实际使用中几乎不会全部书写：
1background: [bg-image] [bg-position] / [b...
第21课：字体与文本样式文字是网页内容的核心载体。CSS 提供了两套属性体系来控制文字的呈现：字体属性（Font Properties）决定文字使用哪种字体、多大、是否加粗倾斜——即“字符长什么样”；文本样式属性（Text Properties）控制文字的排列方式、行高、缩进、装饰线——即“文字怎么排”。理解这两者的分工以及关键属性的工作原理，是实现优雅排版的基础。本节课将系统讲解 font-family 与后备字体栈、@font-face 自定义字体、line-height 的行盒机制，以及 white-space 和文本溢出处理。
1. 字体属性：控制字符的形态1.1 font-f...
第20课：浮动与清除浮动——float、clear 与 BFC在 Flexbox 和 Grid 成为主流布局方案之前，float 是网页布局的核心手段——从多栏排版到图文环绕，再到导航菜单，都依赖浮动来实现。然而，浮动元素“脱离文档流却不完全脱离”的特殊行为，也带来了父容器高度塌陷这一经典问题。理解浮动的工作原理以及各种清除浮动技术，是阅读和维护遗留代码的必备技能。此外，清除浮动引出的块级格式化上下文（BFC） 概念，是 CSS 布局理论的重要基石，其应用远超浮动本身。
1. float 属性：图文环绕与多栏布局float 属性最初的设计目的是实现图文环绕效果——让图片浮动到一侧，文字...
第19课：定位体系（下）——fixed、sticky 与层叠上下文深入上一节课我们学习了 static、relative、absolute 三种定位模式以及包含块和 z-index 的基础规则。本节课将完成定位体系的知识拼图：fixed——将元素锚定在视口上，滚动也无法撼动；sticky——让元素在滚动时“粘住”，实现跟随导航效果；以及层叠上下文的完整创建条件与调试技巧。这三者共同构成了现代 Web 复杂 UI（固定导航、悬浮按钮、粘性表头、模态遮罩）的基石。
1. position: fixed——视口固定定位fixed 将元素从文档流中移除，并相对于视口（Viewport） 进行定...
第18课：定位体系（上）——static、relative、absolute、包含块与 z-indexCSS 定位体系允许你打破正常的文档流，将元素精确地放置在页面的任意位置。它是实现悬浮菜单、模态遮罩、固定导航栏、装饰性叠加元素等复杂 UI 的基础。不恰当的使用会导致元素重叠、溢出、无法点击等问题。本节课将深入讲解前三种定位模式——static、relative、absolute——以及贯穿整个定位体系的包含块（Containing Block） 概念与层叠上下文（Stacking Context） 的 z-index 规则。
1. position 属性五种取值总览position...
第17课：显示类型：display 属性display 属性是 CSS 布局的第一道闸门。它决定了一个元素生成的是块级盒还是行内盒，或者是否生成盒子。同一个 HTML 元素，只要改变 display 值，就可以在“独占一行”和“嵌入文本流”之间切换，甚至从页面中完全消失。理解 display 的各类取值及其行为差异，是构建任何布局之前的必要前提。本节课聚焦于最基础、最常用的四种 display 值：block、inline、inline-block、none，以及与之密切相关的 visibility 属性。
1. 元素盒子的两种基本类型在 CSS 布局模型中，所有元素生成的盒子分为两种...
第16课：盒模型与 box-sizingCSS 中，每个 HTML 元素都可以看作一个矩形盒子。理解这个盒子如何构成、如何计算尺寸、以及如何在不同模式之间切换，是布局和样式调试的绝对基础。盒模型的细微差异足以导致元素溢出、对齐错乱、尺寸失控等问题。本节课将深度剖析 CSS 盒模型的两套标准、box-sizing 属性对全局布局的颠覆性影响，以及 margin、padding、border 三个核心属性的精确行为。
1. CSS 盒模型的四层结构每个元素生成的矩形盒子从内到外由四个区域组成：
123456789101112┌────────────────────────────────...
