cls超标几乎都来自图片未预留空间、字体度量不一致、动态内容未占位；需用aspect-ratio/min-height锁高度、background-image替代img剥离流影响、@font-face补全ascent-override等参数对齐字体度量。
布局偏移（CLS）超标几乎都来自三件事：图片没预留空间、字体加载后度量不一致、动态内容插入时没占位。解决它不靠猜，靠锁定尺寸、剥离流内影响、对齐字体度量。
给 Grid 项加 aspect-ratio 或 min-height 锁死高度
Grid 容器本身不管子元素内容多高，<img> 加载前高度为 0，一加载就撑开整行，旁边卡片全跟着跳。这不是 Grid 的问题，是你没给它“预期”。
-
aspect-ratio: 4 / 3是首选，配合overflow: hidden和img { width: 100%; height: 100%; object-fit: cover; }，加载前后容器尺寸完全不变 - 旧浏览器兼容时用伪元素模拟：
::before { content: ""; display: block; padding-top: 75%; }，但必须配position: relative和子元素position: absolute - 文字卡片高度不可预测？改用
min-height: 200px或grid-auto-rows: minmax(200px, auto)，别放任auto
用 background-image 替代 <img> 彻底剥离文档流
只要 <img> 还在流里，它就可能触发重排。换成背景图，视觉保留，尺寸影响归零。
- 每个 Grid item 设
background-image、background-size: cover、background-position: center - 必须配
min-height（如min-height: 300px），这个值要覆盖所有断点下的最小可读高度 - 文字层用
position: absolute叠上去，别忘了z-index和响应式padding - 注意：
background-image无法被屏幕阅读器识别，关键图文仍需保留<img>+alt
在 @font-face 中补全 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就失效
别漏掉移动端 <meta name="viewport"> 的三个硬性字段
viewport 写不全是移动端布局偏移最硬根因。只写 width=device-width 不够，iOS Safari 和部分安卓 WebView 会自动缩放，导致 fixed 锚点错位、100vh 计算失准、dvh 失效。
- 必须同时包含：
width=device-width、initial-scale=1.0、maximum-scale=1.0（或user-scalable=no） - 漏掉
initial-scale=1.0，某些高 DPR 设备（如 iPhone 14）会把fixed定位坐标按物理像素对齐，但视口却被缩放，视觉上就“飘”了 -
maximum-scale=1.0还能稳定visualViewport.height，让键盘收起时高度重算准确
真正难的不是写对某一行 CSS，而是从第一张图开始就用 aspect-ratio 占位，从第一个自定义字体声明就补全度量参数，从第一个 <meta> 标签就写全 viewport —— 这些事不在“优化阶段”做，而在“写代码第一行”时就决定 CLS 能不能稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
