CSS

一、选择器与基础

1.1 基础选择器

类型选择器 ：div, p
作用：直接匹配标签名，优先级最低（0,0,1）。
注意：过于宽泛，易造成样式泄露，架构中尽量避免裸元素选择器，多用类选择器。
类选择器 ：.class
作用：最常用，复用性强，特异性 (0,1,0)。
ID 选择器 ：#id
作用：唯一匹配，特异性极高 (1,0,0)。
架构师关注点 ：禁止用于样式（特异性过高难以覆盖），保留给 JS 或锚点。

1.2 组合器

后代：A B （所有匹配 B 的后代）
作用：范围过大，渲染性能有影响（从右向左匹配），尽量避免深层嵌套。
子代：A > B （直接子元素）
作用：限制范围，减少误伤。
相邻兄弟 ：A + B （紧邻的下一个兄弟）

通用兄弟 ：A ~ B （A 之后所有同级 B）
使用示例 ：

css 复制代码

.item + .item { margin-top: 8px; } /* 相邻元素间距 */
h2 ~ p { color: gray; } /* h2 之后所有段落 */

1.3 属性选择器

[attr] , [attr="val"], [attr^="val"], [attr$="val"], [attr*="val"], [attr~="val"], [attr|="val"]
作用：无需额外 class，根据属性值样式化，常用于表单状态、data-* 属性、href 等。

使用示例 ：

css 复制代码

input[type="email"]:invalid { border-color: red; }
a[href^="https://"]::after { content: " ↗"; } /* 外部链接标记 */
[data-state="loading"] { opacity: 0.6; }

注意：属性选择器的特异性为 (0,1,0)，与类选择器相同。可配合大小写修饰符 i 或 s：[lang="en" i] 忽略大小写匹配。

1.4 伪类

动态伪类 ：:hover, :focus, :active, :visited

注意：移动端 :hover 存在"粘滞"问题，可用 @media (hover: hover) 限定。:focus-visible 比 :focus 更智能（仅键盘导航时显示轮廓）。
结构伪类 ：:first-child, :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :only-child, :empty

作用：无需修改 HTML 即可根据文档结构样式化。

使用示例：
css 复制代码
```
li:nth-child(odd) { background: #f5f5f5; }
tr:nth-child(2n) { background: #fafafa; } /* 条纹表格 */
.container:empty { display: none; } /* 隐藏空容器 */
```
常用 :nth-child() 公式：even / odd；2n+1；-n+3（前 3 项）。
否定伪类 ：:not(selector)

作用：排除匹配项，特异性会被提升到括号内最高选择器的特异性。

使用：button:not(.primary) { background: gray; }

支持传递多个选择器：:not(.a, .b)。
:is() 与 :where()：
- :is()：特异性取括号内最高的，适合减少重复选择器。
- :where()：特异性永远为 0，不会增加权重，适合作为"默认"样式库。
css 复制代码
```
/* 代替 .header a, .footer a, .sidebar a */
:is(.header, .footer, .sidebar) a { color: blue; }
```
:has() （"父选择器"）：作用：根据后代或兄弟元素选择父级。现代浏览器已广泛支持。
css 复制代码
```
/* 包含图片的段落应用不同样式 */
p:has(img) { display: flex; }
.card:has(:checked) { border-color: blue; } /* 选中状态的卡片 */
```
避免在热路径上大量使用复杂 :has() 选择器（浏览器每次重排都可能重新计算），但一般场景下性能可接受。

1.5 伪元素

::before, ::after：必须配合 content 使用，生成匿名可替换元素。
::first-line, ::first-letter：文本首行/首字样式。
::selection：自定义文本选中高亮。
::placeholder：输入框占位符样式，只能使用部分 CSS 属性（颜色、字体相关等）。

::marker：列表项标记样式。

css 复制代码

::selection { background: #007bff; color: white; }
li::marker { color: #007bff; font-weight: bold; }

::backdrop：为 <dialog> 或全屏元素的背景遮罩设置样式。

二、层叠、继承与特异性（Cascade & Specificity）

2.1 特异性计算 (Specificity)

规则：(A, B, C)
- A = ID 选择器数量
- B = 类、属性、伪类数量（:not() 内计算，:is() 取最高，:where() 为 0）
- C = 类型选择器、伪元素数量
注意：!important 跳过特异性比较，直接最高优先级，但破坏可维护性，仅用于紧急覆盖。多个 !important 冲突时按特异性+源码顺序裁决。
内联样式 特异性近似 (1,0,0,0)，仅 !important 可覆盖内联样式。

2.2 层叠层 (`@layer`)

作用：控制样式优先级顺序，解决大规模系统中不同来源样式冲突的问题。层叠顺序：后声明的 @layer 优先级更高，未分层样式始终高于所有分层样式。
使用：
css 复制代码
```
/* 定义层顺序（越后优先级越高） */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; }
}
@layer components {
  .btn { padding: 10px 20px; }
}
```
核心规则 ：@layer 优先级低于未分层样式，因此第三方库若使用分层，开发者可以轻易用常规样式覆盖，而不必提高选择器特异性。这也意味着你自己的 utilities 层如果想覆盖一切，需要确保它处于最后。

2.3 继承

可继承属性 ：color, font-size, line-height, visibility 等文字相关属性。
不可继承属性 ：margin, padding, border, background, width/height 等盒模型属性。
强制继承/重置 ：
- inherit：强制继承父值。
- initial：重置为属性规范定义的初始值（如 display: inline）。
- unset：继承属性等同 inherit，非继承属性等同 initial。
- revert：回退到浏览器默认样式（revert-layer 回退到上一 @layer 样式）。
css 复制代码
```
.widget { all: unset; } /* 完全剥离继承和用户代理样式 */
```
all: revert 常用于封装组件，将元素完全重置回浏览器默认状态，再建立组件自有样式。

2.4 `!important` 与来源顺序

优先级降序 ：
1. 用户代理样式 (UA) !important
2. 用户样式 !important
3. 作者样式 !important
4. 作者样式（常规）
5. 用户样式（常规）
6. 用户代理样式（常规）
架构师原则 ：避免 !important，通过分层和合理特异性管理；仅在覆盖内联样式或紧急修复时使用。

三、盒模型与布局基础

3.1 标准盒模型 vs IE 盒模型

box-sizing: content-box（默认）：宽高 = 内容宽高，不含 padding 和 border。
box-sizing: border-box ：宽高 = 内容 + padding + border。现代开发默认设置：
css 复制代码
```
*, *::before, *::after { box-sizing: border-box; }
```
作用：border-box 使尺寸计算更直观，减少意外溢出。全局重置时需同时包含伪元素。

3.2 `display` 属性深入

外部显示类型 ：block, inline, inline-block（对内 block，对外 inline）
内部显示类型 ：flow, flow-root, flex, grid, table, ruby
双值语法 ：display: block flex = 外部块级 + 内部 flex 容器。实际开发中仍常用短语法如 flex、grid，但理解双值有助于解决某些怪异行为（如 <li> 设为 flex 时失去 list-item 的 marker）。
display: contents ：元素自身不生成盒子，子元素直接作为父级子元素参与布局（常用于去掉包裹层又不破坏 flex/grid 布局）。
注意：使用 contents 的元素从无障碍树中完全消失 （Chrome 曾有此 bug，现已修复，但仍需谨慎测试），其上的可访问性属性（如 role）也将丢失。
display: none 与 visibility: hidden：
- none：完全从文档流和可访问树中移除。
- hidden：隐藏但占位，且默认不可继承 （但 visibility: visible 可让子元素重新可见）；visibility: collapse 在表格行/列中会隐藏并释放空间，在 flex 中有类似效果（浏览器支持不完全一致）。

3.3 BFC（块级格式化上下文）

触发条件 ：overflow: auto/hidden/scroll（非 visible），display: flow-root，float 非 none，position: absolute/fixed，contain: layout/paint/content 等。
作用：
- 清除浮动（替代 clearfix hack）。
- 防止外边距折叠（垂直相邻块级元素的 margin 合并取最大值）。
- 实现自适应两栏布局（一侧浮动，另一侧触发 BFC）。
推荐：使用 display: flow-root 创建无副作用的 BFC 容器。
css 复制代码
```
.container { display: flow-root; }
```

3.4 外边距折叠（Margin Collapse）

场景：
1. 相邻兄弟元素上下边距：取较大值，非叠加。
2. 父元素与第一个/最后一个子元素：若无 border/padding/行内内容阻断，子元素边距会"穿透"到父级外边。
3. 空块元素：自身上下边距合并。
解决方案 ：
- 父级创建 BFC（display: flow-root）。
- 添加极小的 padding / border。
- 使用 flex/grid 替代（flex/grid 子项的外边距不会折叠）。

3.5 浮动与清除

float ：left, right；元素脱离文档流但保持文本环绕。
clear ：both, left, right；强制元素移动到所有浮动元素下方。
现代替代：flex/grid 布局已基本取代浮动做页面布局，浮动仅用于图片环绕文字等本意场景。

四、现代布局：Flexbox

4.1 容器属性

display: flex （块级）/ inline-flex（行内）
主轴方向 ：flex-direction: row | row-reverse | column | column-reverse
换行：flex-wrap: nowrap | wrap | wrap-reverse
缩写：flex-flow: row wrap
主轴对齐 ：justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- 区别：space-between 首尾贴边，space-around 首尾有半间距，space-evenly 间距均等。
交叉轴对齐 ：align-items: stretch | flex-start | flex-end | center | baseline
多行对齐 ：align-content（多行/多列时生效，控制行间空白分布）
间距：gap: 10px 20px（row-gap / column-gap，已统一到所有布局模式）

4.2 子项属性

flex ：flex-grow flex-shrink flex-basis 的缩写。
- flex: 1 = 1 1 0%（均分剩余空间，忽略内容尺寸）
- flex: auto = 1 1 auto（考虑内容尺寸后分配剩余）
- flex: none = 0 0 auto（不伸缩，保持内容尺寸）
- 单值无单位时为 flex-grow：flex: 2 = 2 1 0%。
align-self ：单个子项覆盖 align-items。
order：默认 0，值越小越靠前；视觉顺序与 DOM 顺序分离，注意无障碍影响（读屏通常遵循 DOM 顺序而非视觉顺序）。

4.3 常见布局模式

圣杯/双飞翼：已过时，用 flex 三列即可。
均分列 ：flex: 1。
粘性页脚 ：min-height: 100vh; display: flex; flex-direction: column; 主内容区 flex: 1。
水平垂直居中 ：display: flex; justify-content: center; align-items: center;。

五、现代布局：Grid

5.1 容器属性

display: grid / inline-grid
定义轨道 ：
- grid-template-columns / grid-template-rows：使用固定值、fr（剩余空间份数）、minmax(min, max)、auto、repeat(次数, 模式)。
- repeat() 高级用法：repeat(auto-fill, minmax(250px, 1fr))（尽量多列，自动换行，无需媒体查询）；repeat(auto-fit, ...) 会在空轨道时折叠，区别在于多余空轨是否保留。
- minmax() 嵌套：minmax(0, 1fr) 防止内容撑破网格（将最小值从默认的 auto 改为 0）。
间距：gap（同 flex，简写为 gap: row column）。
隐式轨道 ：
- grid-auto-rows / grid-auto-columns：设置自动创建的轨道尺寸。
- grid-auto-flow: row（默认，自动添加行）/ column（自动添加列）/ dense（紧凑填充，可能打乱视觉顺序）。
对齐：
- justify-items / align-items（单元格内子项对齐）
- justify-content / align-content（整个网格在容器内对齐，当网格总尺寸小于容器时生效）
- place-items / place-content（同时设置两个方向）

5.2 子项属性

放置：grid-column: 1 / span 2（简写 grid-column-start / grid-column-end）；grid-row 同理。支持负数倒数网格线（-1 为最后一根线）。
命名网格线 ：grid-template-columns: [col-start] 1fr [col-main] 2fr [col-end]，放置时可用名称 grid-column: col-start / col-end。

grid-area ：配合 grid-template-areas 使用，实现直观的可视化布局。

css 复制代码

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: 200px 1fr;
}
.header { grid-area: header; }

5.3 常见布局模式

响应式卡片网格 ：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) --- 无媒体查询实现换行等列。
层叠布局 ：使用同一 grid-area 放置多个元素实现叠加效果（如 Hero 图文叠加），配合 z-index 控制层级。
居中：子元素 place-self: center 或容器 place-items: center。
不等宽分栏 ：grid-template-columns: 1fr 2fr，替代传统百分比布局。

六、响应式设计与媒体查询

6.1 媒体查询（Media Queries）

语法：@media (条件) and (条件) { }
常见条件 ：
- 视口尺寸：min-width, max-width, min-height
- 设备像素比：min-resolution: 2dppx
- 设备方向：orientation: portrait | landscape
- 指针类型：pointer: coarse | fine（触屏 vs 鼠标）
- 悬停能力：hover: hover | none（移动端 none）
- 配色方案：prefers-color-scheme: dark | light
- 减少动画偏好：prefers-reduced-motion: reduce
- 高对比度：prefers-contrast: more | less

使用示例 ：

css 复制代码

@media (min-width: 768px) and (hover: hover) { ... }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; }
}

6.2 容器查询（Container Queries）

作用：基于容器尺寸而非视口尺寸改变样式，真正实现组件级响应式，与组件封装高度契合。
使用：
css 复制代码
```
.card-container {
  container-type: inline-size; /* 启用内联尺寸查询 */
  container-name: card; /* 命名容器，可选 */
}
@container card (min-width: 400px) {
  .card { flex-direction: row; }
}
```
container-type 取值：inline-size（仅宽度查询，推荐）、size（宽高均可查询，但需显式高度，否则高度塌陷）、normal（查询样式的容器，不查询尺寸）。
容器查询长度单位 ：cqw（容器宽度的 1%）、cqh、cqi、cqb、cqmin、cqmax，仅在查询上下文中有效。

6.3 移动优先 vs 桌面优先

移动优先 ：基础样式为移动端设计，通过 min-width 逐级增强。减轻移动端加载不必要样式，推荐。
css 复制代码
```
/* 移动端 */
.layout { display: block; }
/* 平板及以上 */
@media (min-width: 768px) { .layout { display: flex; } }
```
桌面优先 ：以 max-width 降级，适合已有桌面站点的改造。

6.4 响应式排版

clamp(min, preferred, max) ：根据视口动态计算字号，无需媒体查询。
css 复制代码
```
h1 { font-size: clamp(1.5rem, 4vw + 1rem, 3rem); }
p { width: min(100% - 2rem, 65ch); } /* 兼顾小屏和最佳行长 */
```
理想行长：英文 45--75 字符，中文约 30--45 字符；ch 单位（近似于 "0" 字宽）天然适应。
流体排版 ：配合 clamp 和视口单位实现平滑缩放。

七、动画与过渡

7.1 `transition`

语法：transition: property duration timing-function delay;
常用 timing-function ：
- ease / ease-in / ease-out / ease-in-out / linear
- cubic-bezier() 自定义。
- steps(n, start|end)：逐帧动画。
注意：避免过渡 height: auto（需用 max-height hack 或借助 JS 获取精确高度）；display 不可过渡，替代方案用 opacity + visibility 或即将到来的 @starting-style。

7.2 `animation`

语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
@keyframes ：定义帧，支持 from/to 或百分比，可同时改变多个属性。
animation-fill-mode ：
- forwards：保持最后一帧样式（受 iteration-count 影响）。
- backwards：在 animation-delay 期间应用第一帧样式。
- both：两者均适用。
animation-play-state ：running / paused，悬停暂停轮播等场景。
animation-composition ：replace（默认，覆盖底层值）| add（与底层值叠加），用于需要多个动画操作同一属性的场景。

7.3 性能优化

仅动画 transform 和 opacity：这两个属性只触发合成（Composite），不触发回流（Layout）和重绘（Paint），可在 GPU 合成器线程处理，不占用主线程。
will-change ：提前告知浏览器即将变化的属性，提前创建 GPU 层。
注意：不要滥用（will-change: transform 过多会导致 GPU 内存暴增），应在动画开始前动态添加，动画结束后移除。
transform: translateZ(0) ：强制硬件加速的 hack，现代浏览器已不再需要此技巧，优先使用 will-change。
prefers-reduced-motion：尊重用户系统设置，应作为架构级动画降级策略。

7.4 现代动画 API（关联）

@starting-style ：为首次渲染或 display: none 变为可见的元素定义起始样式，允许 transition 作用于这些场景。
css 复制代码
```
.modal {
  opacity: 1;
  transition: opacity 0.3s;
  @starting-style { opacity: 0; }
}
```
transition-behavior: allow-discrete ：允许 display 等离散属性参与过渡（需配合 @starting-style），元素入场保留 display: block 的过渡效果，出场时延迟到过渡结束后再切换 display。
滚动驱动动画 （Scroll-driven Animations）：通过 animation-timeline: scroll() 或 view() 将动画进度与滚动位置绑定，无需 JS 即可实现视差、滚动进度指示器等。目前 Chrome/Edge 已支持。

八、视觉效果与图形

8.1 颜色与渐变

色彩空间 ：
- sRGB：#HEX, rgb(), hsl()
- 广色域：display-p3，使用 color(display-p3 1 0 0) 或新语法 oklch(), oklab()、lch()。
- oklch() 优势：人类感知均匀的明度轴，调整明暗更直观；色相与饱和度解耦，可独立控制鲜艳程度。
渐变：
- linear-gradient(direction, color-stop, ...)
- radial-gradient(shape size at position, ...)
- conic-gradient(from angle at position, ...)（锥形渐变，饼图、取色器等）
新特性 ：color-mix() 函数混合颜色；light-dark(color-light, color-dark) 一行适配亮暗模式。

8.2 阴影与滤镜

box-shadow ：inset x-offset y-offset blur-radius spread-radius color。支持多重阴影（逗号分隔），可叠加实现细腻的层级感。
text-shadow ：无 spread 参数，同样支持多重。
filter ：blur(), brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), saturate(), opacity(), drop-shadow()（真实投影，跟随元素形状，尤其适合 PNG 图片）。
backdrop-filter ：对元素后方区域应用滤镜（毛玻璃效果），需背景半透明才能可见。

8.3 形状与裁剪

border-radius ：可分别设置四个圆角，支持椭圆角（/ 分隔水平垂直半径）。
clip-path ：裁剪元素显示区域，支持基础形状（circle, ellipse, inset, polygon）和 SVG path。配合 transition 可做变形动画，但裁剪路径变化需要相同点数。
mask ：类似 background 语法，使用图像/渐变做蒙版。可实现镂空、纹理遮罩等效果。
mix-blend-mode ：元素内容与背景混合（multiply, screen, overlay 等）。background-blend-mode：同一元素多层背景混合。

8.4 字体与排版

可变字体 ：单一字体文件支持多种轴（wght, wdth, slnt, ital, opsz），通过 font-variation-settings 或标准属性控制。大幅减少请求数。

css 复制代码

@font-face {
  font-family: 'Roboto Flex';
  src: url('RobotoFlex.woff2') format('woff2-variations');
}
.text {
  font-family: 'Roboto Flex';
  font-weight: 300 700; /* 范围值 */
  font-stretch: 75% 100%;
}

font-display：控制字体加载期间的显示行为。
- block：短暂不可见后回退（最长 3s 不可见期），然后替换。
- swap：立即显示回退字体，加载后替换（推荐，避免白屏，但注意 FOUT 布局抖动）。
- fallback：短暂不可见（约 100ms），若未加载则用回退，但不再替换。
- optional：短暂不可见，未加载则放弃替换，后续页面访问会使用缓存版本。
- 策略：品牌字体用 swap，正文图标类用 optional。
size-adjust （@font-face 内）：微调回退字体的字面尺寸，减小 FOUT 时的布局偏移（CLS）。例如将 Arial 的百分比尺寸调至与目标 Web 字体匹配。

九、CSS 架构与工程化

9.1 CSS 方法论

BEM (Block__Element--Modifier) ：
- .block__element--modifier
- 命名清晰，无嵌套依赖，特异性低，适合大型项目。
Utility-first (Tailwind 等) ：
- 原子类组合，快速构建，设计约束内化，HTML 可能较长但可维护性高，重构成本低。
CSS Modules ：
- 本地作用域，类名编译后添加 hash 避免冲突，适合组件化开发。
CSS-in-JS ：
- 运行时（styled-components, emotion） vs 编译时（vanilla-extract, panda）
- 运行时方案有性能开销，编译时（零运行时）方案是趋势。

9.2 特异性管理与层级

ITCSS (Inverted Triangle CSS)：从通用到精确的分层结构（Settings → Tools → Generic → Elements → Objects → Components → Utilities），特异性逐层升高。
@layer 分层：明确优先级，reset 最低，utilities 最高。
选择器嵌套 （CSS Nesting）：原生支持 & 嵌套，减少重复选择器名。
css 复制代码
```
.card {
  background: white;
  & .title { font-size: 1.5rem; } /* 注意：此处的 & 等同于 .card */
  &:hover { box-shadow: 0 2px 8px; }
}
```
原生嵌套中 & 是必选的（不同于 SCSS 中内层选择器可省略 &），嵌套深度不建议超过 3 层，否则编译后的特异性急剧增加。

9.3 自定义属性（CSS 变量）

定义：--name: value; 通常在 :root 或组件根部。
使用：var(--name, fallback)
作用：
- 动态主题切换（改变根变量即可全局生效）。
- 组件级变量传递，实现上下文感知。
- 配合 calc() 进行动态计算。
注意：CSS 变量是可继承 的（由 DOM 树决定），且在运行时求值，因此可在子组件中重新赋值覆盖。不能用于媒体查询断点值（@media (min-width: var(--bp)) 无效，因为变量在 @media 条件中不生效）。不能存储非属性值的字符串（如动画名称 animation-name: var(--name) 有兼容限制）。

9.4 样式作用域与 Shadow DOM

@scope ：
- 限定样式影响范围，不依赖 Shadow DOM。
- 语法：@scope (selector) to (selector)，设定作用域上边界和下边界（to 为排他边界）。
css 复制代码
```
@scope (.card) to (.card-footer) {
  img { border-radius: 8px; } /* 仅影响 .card 内、.card-footer 外的 img */
}
```
@scope 内 :scope ：指代作用域根元素本身，如 @scope (.card) { :scope { padding: 1rem; } }。

十、性能优化

10.1 关键 CSS 与按需加载

关键 CSS ：内联首屏所需的最小 CSS（<style> 标签），其余异步加载。手动提取或使用工具（Critical、Penthouse）。

非关键 CSS 异步加载 ：

html 复制代码

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

或使用 media="print" 切换：<link rel="stylesheet" href="..." media="print" onload="this.media='all'">。

10.2 选择器性能

浏览器从右向左匹配选择器。
避免：过度深层的后代选择器（如 .a .b .c .d），通用选择器 * 作为最右项（但 * + * 是可以的）。性能问题通常不如布局和绘制影响大，但大页面中大量复杂选择器累积开销不可忽视。
推荐：使用简短类名选择器，利用 BFC 减少不必要回流。

10.3 避免布局抖动

读写分离 ：避免在修改样式后立即读取布局信息（如 offsetHeight, clientTop 等），批量读后再批量写，或使用 requestAnimationFrame。
contain 属性 ：明确隔离作用域，让浏览器优化重绘/回流范围。
- layout：盒子内部布局不影响外部。
- paint：子元素不绘制在盒子外。
- size：盒子尺寸不依赖子元素（需显式指定尺寸）。
- content：layout + paint 的组合。
- strict：layout + paint + size。
css 复制代码
```
.list-item { contain: layout style; } /* 列表项隔离 */
```
style 值控制计数器（counter）和引号（quote）等样式不穿透进出，实际场景中使用较少。

10.4 `content-visibility`

作用：延迟渲染视口外的元素，大幅减少初始渲染树体积和内存占用。
值：
- visible：默认。
- hidden：跳过渲染，但保留布局空间。
- auto：浏览器自动判断是否接近视口，自动跳过渲染（自动添加 contain: layout style paint）。
css 复制代码
```
.section { content-visibility: auto; contain-intrinsic-size: 500px; } /* 建议预估高度，防止滚动条跳动 */
```
contain-intrinsic-size 提供占位高度，避免滚动条长度剧烈变化。可取 auto 500px：auto 表示浏览器会用已渲染内容估算剩余尺寸，500px 为兜底值。

十一、可访问性与 CSS

11.1 焦点样式

:focus-visible ：仅在键盘导航时显示焦点轮廓（浏览器默认行为），鼠标点击时不显示。不要直接移除所有元素的 :focus 轮廓而不提供替代方案。

自定义焦点 ：

css 复制代码

:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

11.2 颜色对比度

WCAG 要求：普通文本对比度至少 4.5:1，大文本（18px+ 或 14px+ 粗体）至少 3:1。
工具：Chrome DevTools 可直接检测；CSS color-contrast() 函数（实验性）自动选择对比度最高的颜色。
prefers-contrast ：more / less / custom，响应用户系统设置增强/减弱对比度。

11.3 动画与动效

prefers-reduced-motion: reduce：关闭或减弱动画，保护前庭功能障碍用户。

实践：将过渡/动画放在该媒体查询中，确保无障碍。

css 复制代码

@media (prefers-reduced-motion: no-preference) {
  .animated { animation: slideIn 0.5s; }
}

11.4 屏幕阅读器专用样式

.sr-only （visually hidden）：让内容不可见但可被读屏访问（替代 display: none）。
css 复制代码
```
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
```
不要使用 visibility: hidden 或 opacity: 0，它们会将元素从无障碍树中移除或使读屏忽略（取决于具体实现与 ARIA 组合，但 .sr-only 是最稳妥的做法）。

11.5 `forced-color-adjust`

作用：在 Windows 高对比度模式下保留设计意图（如品牌色）。
css 复制代码
```
.icon { forced-color-adjust: none; }
```

十二、现代与未来 CSS

12.1 视图单位更新

dvh, lvh, svh ：分别代表动态视口高度、大视口高度、小视口高度，解决移动端地址栏收缩/展开导致 100vh 溢出或不足的问题。
css 复制代码
```
.hero { height: 100dvh; } /* 适合移动端全屏 */
```
相应的宽度单位 dvw, lvw, svw 也存在，但移动端宽度通常固定，使用较少。
dvmin, dvmax 等逻辑组合单位同理。

12.2 用户偏好查询

prefers-color-scheme: dark | light
prefers-reduced-motion
prefers-contrast
prefers-reduced-data：用户省流量模式，可减少高清图片、视频加载。
prefers-reduced-transparency：减少透明度。

12.3 CSS 函数与高级计算

calc() ：混合单位计算，支持 +, -, *, /。calc-size() 实验性支持从 auto 计算。
min(), max(), clamp()：无需媒体查询实现响应式数值。
三角函数 ：sin(), cos(), tan(), asin() 等，用于创建复杂几何布局。
round() , mod(), rem()：格式化数值，对动态值取整（如步进值）。

12.4 锚点定位（Anchor Positioning）

作用：一个元素（如 tooltip）相对于另一个元素（锚点）进行定位，无需 JavaScript 计算位置，且自动处理视口边界碰撞（翻转、移位）。
定义锚点 ：anchor-name: --my-anchor;
定位元素 ：position: absolute; position-anchor: --my-anchor; top: anchor(bottom); left: anchor(left);
css 复制代码
```
.tooltip {
  position: absolute;
  position-anchor: --btn;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
}
```
也支持 position-area（九宫格快捷定位）和 position-try（视口边缘溢出时的备选方案）。

12.5 View Transitions API（CSS 部分）

作用：在页面或元素状态变化时创建流畅的过渡动画，通过 CSS 控制过渡细节。
跨文档过渡 ：@view-transition { navigation: auto; }

伪元素 ：::view-transition-old, ::view-transition-new 等，可完全自定义过渡效果。

css 复制代码

::view-transition-old(root) { animation: fade-out 0.3s; }
::view-transition-new(root) { animation: fade-in 0.3s; }

十三、CSS 与渲染流程

13.1 渲染阶段回顾

重排（Layout）：更改几何属性（width, height, padding, margin, top, left 等）触发。成本最高。
重绘（Paint） ：更改 color, background, box-shadow 等，不触发重排。
合成（Composite） ：transform, opacity，仅合成层变化，成本最低。

13.2 层爆炸与 GPU 内存

过多合成层（如大量 will-change 或 translateZ(0) 元素）导致 GPU 显存占用过高，在低端设备造成卡顿甚至崩溃。每层需分配位图内存（如 1920×1080×4 字节 ≈ 8MB 每层）。
使用 Chrome DevTools → Layers 面板审查层数。

13.3 样式计算优化

回流触发后浏览器需要：样式重计算 → 布局 → 绘制 → 合成。其中样式计算范围可能扩散到被影响元素的大量后代。contain 属性可有效限制波及范围。

一、选择器与基础

1.1 基础选择器

1.2 组合器

1.3 属性选择器

1.4 伪类

1.5 伪元素

二、层叠、继承与特异性（Cascade & Specificity）

2.1 特异性计算 (Specificity)

2.2 层叠层 (@layer)

2.3 继承

2.4 !important 与来源顺序

三、盒模型与布局基础

3.1 标准盒模型 vs IE 盒模型

3.2 display 属性深入

3.3 BFC（块级格式化上下文）

3.4 外边距折叠（Margin Collapse）

3.5 浮动与清除

四、现代布局：Flexbox

4.1 容器属性

4.2 子项属性

4.3 常见布局模式

五、现代布局：Grid

5.1 容器属性

5.2 子项属性

5.3 常见布局模式

六、响应式设计与媒体查询

6.1 媒体查询（Media Queries）

6.2 容器查询（Container Queries）

6.3 移动优先 vs 桌面优先

6.4 响应式排版

七、动画与过渡

7.1 transition

7.2 animation

7.3 性能优化

7.4 现代动画 API（关联）

八、视觉效果与图形

8.1 颜色与渐变

8.2 阴影与滤镜

8.3 形状与裁剪

8.4 字体与排版

九、CSS 架构与工程化

9.1 CSS 方法论

9.2 特异性管理与层级

9.3 自定义属性（CSS 变量）

9.4 样式作用域与 Shadow DOM

十、性能优化

10.1 关键 CSS 与按需加载

10.2 选择器性能

10.3 避免布局抖动

10.4 content-visibility

十一、可访问性与 CSS

11.1 焦点样式

11.2 颜色对比度

11.3 动画与动效

11.4 屏幕阅读器专用样式

11.5 forced-color-adjust

十二、现代与未来 CSS

12.1 视图单位更新

12.2 用户偏好查询

12.3 CSS 函数与高级计算

12.4 锚点定位（Anchor Positioning）

12.5 View Transitions API（CSS 部分）

十三、CSS 与渲染流程

13.1 渲染阶段回顾

13.2 层爆炸与 GPU 内存

13.3 样式计算优化

2.2 层叠层 (`@layer`)

2.4 `!important` 与来源顺序

3.2 `display` 属性深入

7.1 `transition`

7.2 `animation`

10.4 `content-visibility`

11.5 `forced-color-adjust`