1. 层叠优先级（Specificity）

优先级规则

元素 (.cas-base) → class (.cas-class) → id (.cas-id)

内联 style="" 优先级最高 (1,0,0,0)

!important 凌驾所有层级

计算：class=0,0,1,0   id=0,1,0,0   inline=1,0,0,0

2. 继承

父元素设 color + border

我是父元素（color=橙，border=橙）
→ 我是子元素（继承橙色文字，但 border 不继承）

color 可继承 / border 不可继承

控制继承的关键字

inherit 强制继承父元素

initial 重置为属性初始值

unset 可继承=inherit，不可继承=initial

revert 回退到浏览器默认

3. 盒模型：content-box vs border-box

content-box（默认）

width: 100px; padding: 15px; border: 4px

100px

实际宽度 = 100+15×2+4×2 = 138px

border-box（推荐）

width: 100px; padding: 15px; border: 4px

100px

实际宽度 = 100px（padding/border 内含）

4. Margin 塌陷

普通容器（塌陷发生）

mb=20 + mt=15 = ?

上 margin-bottom: 20px
下 margin-top: 15px

间距 = max(20, 15) = 20px（塌陷合并！）

BFC 容器（不塌陷）

overflow: hidden → 触发 BFC

上 margin-bottom: 20px
下 margin-top: 15px

BFC 隔离后不会塌陷到外部

5. BFC：清除浮动 & 两栏布局

右栏 overflow: hidden → BFC

float: left
BFC 右栏：不环绕 float，自动撑开形成两栏。这是最经典的自适应布局方案。

6. 层叠上下文与 z-index

同层级叠上下文内比较

z-index: 2
z-index: 1

红色 z=2 > 蓝色 z=1 → 红色在上面 ✓

不同上下文中：z=999 被 z=2 遮挡

父级上下文 z=1
z-index: 999
z-index: 2（外部）

子级 999 在父级 z=1 上下文中；外部 z=2 > 1 → 外部在上 ✗