怎样减少CSS Grid页面加载时的布局偏移-css教程-PHP中文网

cls 主要源于尺寸未预留，需通过容器尺寸锁定、背景图替代 img、字体度量对齐三措施协同解决：用 aspect-ratio 或 min-height 锁高度，以 background-image 替代 img 并设 min-height，用 ascent-override 等参数对齐字体度量。

怎样减少css grid页面加载时的布局偏移

直接结论：布局偏移（CLS）在 Grid 页面中几乎都来自“尺寸未预留”——图片、字体、动态插入内容没提前占位，浏览器只能边加载边重排。解决它不靠 hack，靠三件事：容器尺寸锁定、背景图替代 img、字体度量对齐。

用 `aspect-ratio` 或 `min-height` 锁死网格项高度

Grid 本身不替你管子元素内容高矮，img 加载前高度为 0，一加载就撑开整行，旁边卡片全跟着跳。这不是 Grid 的 bug，是你没给它“预期”。

aspect-ratio 是首选：给卡片容器设 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 或 minmax(200px, auto) 配合 grid-auto-rows，而不是放任 auto

把 `<img>` 换成 `background-image` 容器

只要 <img> 还在文档流里，它就可能触发重排。换成背景图，彻底剥离尺寸影响，只留视觉。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

每个 Grid item 设 background-image、background-size: cover、background-position: center
必须配 min-height（如 min-height: 300px），这个值要覆盖所有断点下的最小可读高度
文字层用 position: absolute 叠在上面，避免干扰布局流；别忘了加 z-index 和响应式 padding
注意：背景图无法被屏幕阅读器识别，关键图文内容仍需保留 <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 就失效
字号缩放、em 单位、line-clamp 要同步控制，否则度量对齐了，行数一变还是抖