响应式布局中cls主因是关键占位策略缺失，需为图片/iframe设html宽高属性、动态内容预留容器高度、字体加载配size-adjust、grid中显式定义grid-auto-rows。
响应式布局里出现累计布局偏移（CLS），基本不是“没写对媒体查询”，而是关键占位策略缺失或失效。最稳的解法是让每个可能变化的元素，在渲染前就拥有可预测的尺寸和位置边界。
图片/iframe必须带原始宽高属性，CSS宽高无效
浏览器解析HTML时，<img>或<iframe></iframe>没写width和height属性，就按0×0占位；等资源加载完才重排，下方内容必然下移——这是CLS最硬核来源。
- 必须同时写两个属性：
width="1200" height="800"，不带单位、不写%、不写auto -
style="width: 100%; height: auto"或aspect-ratio: 16/9只能作为CSS增强，不能替代HTML属性 -
srcset+sizes仍要配width/height，否则浏览器可能先按默认尺寸占位再调整，造成两次偏移 - 第三方嵌入（如YouTube）哪怕加了
loading="lazy"，没尺寸照样跳
动态内容插入前必须预留容器高度
Lighthouse报贡献CLS，通常是因为JS插入的广告、评论、推荐模块没占位——它们一出现，就把原有内容往下顶，被记为源头。
- 在HTML源码里就写好占位：
<div id="ad-slot" style="min-height: 250px"></div>，高度尽量接近历史均值 - 不能用
visibility: hidden或opacity: 0占位——它们不脱离文档流但无尺寸，等于没占 - 必须是
min-height或固定height；height: 0; overflow: hidden+ JS展开，算一种保守策略 - 若必须JS控制位置，优先用
transform: translateY()或position: absolute，让元素脱离文档流
字体加载必须配size-adjust，swap alone不够
font-display: swap能防白屏，但解决不了文字“突然变高/变矮”的抖动。系统字体和自定义字体的x-height、line-height、字宽不一致，替换瞬间就会重排。
- 在
@font-face里必须加size-adjust: 102%（数值需实测，通常在95%～105%之间） - 回退链要严谨：
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif，避免Android fallback到Droid Sans这类过粗字体 - 同一字体族的不同字重（如400和700）要各自声明
@font-face并写font-display: swap -
preload关键字体时必须加crossorigin，否则Chrome会拒绝复用预加载资源
CSS Grid中动态插入内容要设grid-auto-rows
JS动态追加的卡片、列表项等，一旦超出显式定义的grid-template-rows，就会掉进隐式行轨道——而浏览器默认grid-auto-rows: auto，极易导致视觉上“被压扁”或“突然撑开抖动”。
- 显式声明：
grid-auto-rows: minmax(56px, max-content)，最小保证可读高度，内容多时自动扩展 - 避免写
grid-auto-rows: 80px这类绝对值，内容超长会被裁剪，且无法响应字体缩放 - 用
grid-row-start占位符控制插入位置，而不是靠appendChild拼DOM顺序 - 占位符别用
display: none——它会完全退出网格布局流程，位置失效
真正难处理的CLS，往往藏在“看起来已经好了”的地方：比如字体替换时基线微调、小屏下min-height被字体放大撑破、或者scrollbar-gutter没作用在html根元素上。这些点不爆问题时没人注意，一爆就是线上用户集体反馈“页面在跳”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
