一、理解“层叠”与“继承”1.1 层叠Cascade—— 冲突解决的规则CSS 的“C”代表 Cascade层叠其本质是当多个规则作用于同一个元素时如何决定最终生效的样式。层叠遵循以下优先级从高到低重要性!important—— 最高权重但应谨慎使用。内联样式style 属性—— 直接写在 HTML 标签上的样式。选择器特异性Specificity—— ID 类/属性/伪类 标签/伪元素。源代码顺序—— 若特异性相同后出现的声明覆盖前面的。实战提示过度使用!important会让样式表难以维护。请优先通过提高选择器特异性或调整顺序来解决冲突。1.2 继承Inheritance—— 节省代码的隐形之手某些 CSS 属性如color、font-family、line-height会从父元素自动继承给子元素而另一些如width、margin、border则不会。理解继承可以帮助我们避免大量重复声明。强制继承使用inherit关键字。取消继承使用initial或unset。二、盒模型CSS 布局的基石每个元素在 CSS 中都被视为一个矩形盒子由content、padding、border、margin构成。2.1 标准盒模型 vs. 替代盒模型标准盒模型box-sizing: content-boxwidth只包含内容区域padding 和 border 会向外扩展。替代盒模型box-sizing: border-boxwidth包含内容 padding border更符合直觉也是现代开发中的首选。css/* 全局重置为 border-box */ * { box-sizing: border-box; }2.2 margin 塌陷折叠相邻块级元素的上下外边距会合并取较大值而非相加。这在垂直排版中经常造成困惑解决办法包括使用 flex 布局、添加padding或border触发 BFC块级格式化上下文。三、布局进化史从 Float 到 flex3.1 Flexbox —— 弹性盒子Flexbox 适用于行或列方向的弹性排列。关键属性display: flex开启弹性容器。flex-direction控制主轴方向。justify-content主轴对齐align-items交叉轴对齐。flex: 1等分配置实现灵活自适四、响应式设计的核心媒体查询与相对单位4.1 相对单位em相对于父元素的字体大小。rem相对于根元素html的字体大小。vw/vh视口宽度/高度的百分比适合全屏元素。%相对于包含块的尺寸。4.2 媒体查询通过media可以针对不同屏幕尺寸、分辨率、方向等应用不同样式。css/* 平板及以下 */ media (max-width: 768px) { .sidebar { display: none; } }移动优先策略先写移动端样式再用min-width渐进增强。五、CSS 性能优化要点选择器效率避免过于深层或过于具体的选择器如div ul li a尽量用类选择器。减少重排与重绘避免频繁修改影响几何属性的样式善用transform和opacity触发合成。关键 CSS 内联将首屏所需样式内联在head中非关键样式异步加载。压缩与合并生产环境使用 CSS 压缩工具减少文件体积。六、现代 CSS 新特性速览CSS 变量自定义属性允许定义可复用的值并可在运行时动态更新。容器查询基于父容器尺寸进行响应比视口媒体查询更灵活。层级layer显式控制样式优先级避免特异性战争。子网格subgrid让子项继承父网格的行列线实现更整齐的嵌套布局。