布局偏移（CLS）几乎都来自“尺寸未预留”，解决需三协同：容器尺寸锁定（如aspect-ratio或min-height）、背景图替代img（配min-height和绝对定位文字层）、字体度量对齐（ascent-override等+preload）。
布局偏移（CLS）几乎都来自“尺寸未预留”——图片、字体、动态内容没提前占位，浏览器只能边加载边重排。解决它不靠 hack，靠三件事：容器尺寸锁定、背景图替代 img、字体度量对齐。
怎么锁死 Grid 项高度避免图片加载抖动
Grid 本身不管子元素内容高矮，img 加载前高度为 0，一加载就撑开整行，旁边卡片全跟着跳。这不是 Grid 的 bug，是你没给它“预期”。
-
aspect-ratio: 4 / 3+overflow: hidden是首选：给卡片容器设比例，再让img填满（width: 100%; height: 100%; object-fit: cover），加载前后尺寸完全不变 - 兼容旧浏览器时，用伪元素
::before+padding-top: 75%模拟比例占位，但必须配position: relative和子元素position: absolute - 文字卡片高度不可预测？改用
min-height: 200px或grid-auto-rows: minmax(200px, auto)，别放任auto
为什么要把 img 换成 background-image
只要 img 还在文档流里，它就可能触发重排。换成背景图，彻底剥离尺寸影响，只留视觉。
- 每个 Grid item 设
background-image、background-size: cover、background-position: center - 必须配
min-height: 300px（这个值要覆盖所有断点下的最小可读高度） - 文字层用
position: absolute叠在上面，避免干扰布局流；别忘了加z-index和响应式padding - 注意：
background-image无法被屏幕阅读器识别，关键图文内容仍需保留img+alt，仅视觉优化用背景图
字体加载抖动怎么用 ascent-override 补齐
font-display: swap 只让你看到字，不保证换字体后行高、基线位置不变。系统字体和自定义字体的 ascent/descent 差个 10%，标题就右移几像素，CLS 直接超标。
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Elements → 计算样式，分别查 fallback 字体和自定义字体的
ascent、descent、line-gap - 在
@font-face中写三参数：ascent-override、descent-override、line-gap-override，值用百分比计算（例如ascent-override: calc(920 / 850 * 100%)） - 必须加
<link rel="preload" as="font" type="font/woff2" crossorigin>，否则字体还没进缓存队列，override就失效
移动端 100vh 错位和 fixed 元素飘移怎么防
微信、iOS 键盘弹出、地址栏收起时，height: 100vh 会被锁死在初始视口高度，内容被截断或底部消失——这不是渲染失败，是高度没重算。
- 现代方案优先用
100dvh，但微信安卓 X5 内核普遍不支持，iOS 也得 ≥ 8.0.49 才行 - 安全写法是：
min-height: 100vh; min-height: 100dvh;—— 注意顺序，老内核跳过100dvh，新内核覆盖100vh -
viewport标签必须写全：width=device-width, initial-scale=1.0, maximum-scale=1.0，缺一不可，否则fixed在 iOS Safari 里会悄悄降级为relative
真正难的不是单点修复，而是三者协同：容器尺寸锁定没做，字体 override 就白调；用了 background-image 却漏了 min-height，照样抖；viewport 少一个参数，fixed 导航栏就飘。这些点必须一起落地，CLS 才能稳定压到 0.1 以下。
