一、理解“层叠”与“继承”
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-box）：width只包含内容区域，padding 和 border 会向外扩展。替代盒模型（
box-sizing: border-box）：width包含内容 + padding + border，更符合直觉，也是现代开发中的首选。
css
/* 全局重置为 border-box */ * { box-sizing: border-box; }2.2 margin 塌陷（折叠）
相邻块级元素的上下外边距会合并（取较大值），而非相加。这在垂直排版中经常造成困惑，解决办法包括：使用 flex 布局、添加padding或border触发 BFC（块级格式化上下文）。
三、布局进化史：从 Float 到 flex
3.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）：让子项继承父网格的行列线，实现更整齐的嵌套布局。
