用 background-image 替代 标签并配合 min-height 是最可靠、零 js 的 cls 解决方案；因 未声明尺寸会导致异步加载时重排，而 background-image 彻底隔离流内影响，避免推挤内容。
直接用 background-image 替代 <img> 标签，配合显式尺寸控制，是目前最可靠、零 JS 的解法。其他方案（如 loading="lazy"、width/height 属性）只能缓解，无法根治。
为什么 <img> 一定会引发 CLS？
浏览器解析到 <img> 时，若没声明 width 和 height，就无法预留空间；图片异步加载完成前，后续内容（<h3></h3>、<p></p>）会先按“高度为 0”渲染，等图片下来再重排——这就是累积布局偏移（CLS）的典型来源。
即使写了 width="300" style="max-width:90%"，在响应式场景下（比如 max-width: 100%）仍可能被 CSS 覆盖，导致尺寸失效。
用 background-image + min-height 彻底隔离流内影响
把图片从文档流里“拿掉”，它就再也不会推挤文字或改变容器高度：
– 必须给每个容器设 min-height（不能只靠 height，否则小图会拉伸变形）
– background-size: cover 或 contain 控制裁剪/缩放行为
– 内容层用 position: absolute 叠加，脱离流布局
.grid-item {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px; /* ✅ 关键：所有项统一占位 */
}
.grid-item .content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1em;
}
HTML 结构也要同步改：
– 不再用 <img src="...">
– 改为 <div class="grid-item" style="max-width:90%"...')"><div class="content">...</div></div>
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Grid 布局中必须提前定义网格轨道尺寸
如果用 grid-template-rows: auto 或留空，浏览器仍会等图片加载完才确定行高，CLS 照样发生。
正确做法是：用 minmax() 或固定值锁定轨道高度
-
grid-template-rows: repeat(2, minmax(400px, auto))—— 最小 400px，允许撑高 -
grid-auto-rows: 400px—— 所有隐式行统一高度 - 避免
fr单位用于图片容器行（1fr依赖内容撑开，不可控）
移动端要额外防滚动条宽度吃空间
iOS 和部分 Android 浏览器滚动时会临时隐藏滚动条，导致容器宽度突变，图片和文字跟着右偏——这不是图片加载问题，但常被误判。
解决方式不是去掉滚动条，而是预留空间：
- 给滚动容器加
overflow-gutter: stable（新标准，支持度有限） - 更通用的写法：
padding-right: calc(100vw - 100%);动态补偿滚动条宽度 - 或者直接用
body { margin: 0; }+html { overflow-y: scroll; }强制滚动条常驻
真正难处理的，其实是背景图加载慢 + 字体加载慢 + 容器尺寸未约束这三者叠加。单点修复容易漏掉连锁反应，得一起压住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
