布局抖动（CLS）源于HTML结构缺乏确定性信号，需在解析阶段通过原生width/height、预留滚动条宽度、硬编码提示容器等手段解决，而非依赖CSS或JS补救。
布局抖动（CLS）不是样式问题，而是 HTML 结构本身没给浏览器足够确定性信号——只要 img 缺 width/height、video 没预留边框、模态框没补滚动条宽度，再好的 CSS 也压不住抖。
img 和 video 必须带原生尺寸属性，不能只靠 CSS 补救
浏览器解析 HTML 的第一帧，只认 width 和 height 这两个属性。没有它们，img 就按 0×0 或行内默认尺寸占位，等图片加载完才重排；video 同理，hover 加边框会突变盒模型。
-
img标签必须同时写width和height，值取原始像素尺寸（不是 CSS 像素或百分比） - SVG 除了
viewBox，也建议显式设width/height，否则某些 Safari 场景 fallback 到 300×150 -
video初始用border: 2px solid transparent占位，hover 只改border-color，避免尺寸跳变 -
max-width: 100%或aspect-ratio是 CSS 层补救，但首帧可靠性远不如 HTML 原生声明
模态框开启时 body 宽度突变，得用 JS 动态补 margin
模态框一弹出，body 滚动条消失，可用宽度瞬间变大，右侧内容左移——这不是 CSS 能 fix 的，是结构级宽度重计算。
- 别用
overflow: hidden简单禁滚动条，那只会让抖更明显 - 正确做法：先读
document.body.offsetWidth，再设document.body.style.overflow = 'hidden'，再读一次，差值就是滚动条宽度 - 用
document.body.style.marginRight = '${scrollBarWidth}px'锁住宽度 - 关闭模态框时，必须清掉
marginRight和overflow，否则后续页面滚动异常
feedback 提示容器必须硬编码在 HTML 中
表单校验失败后用 JS appendChild 插入提示 div，等于在流式布局里硬塞新节点——下方所有内容立刻下移，这不是动画抖，是结构塌陷。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 这个提示容器必须作为
input的紧邻兄弟节点，写死在 HTML 里 - 隐藏方式只能是
visibility: hidden; height: 0; overflow: hidden - 绝不能用
display: none或remove()再插入，否则每次显示都触发重排 - 同理，骨架屏结构也得提前写进 HTML，不能 JS 动态生成
DOM 嵌套超过 4 层就容易放大抖动影响
深层嵌套会让浏览器解析变慢、CSS 匹配成本指数上升，一旦某个子元素尺寸变化（比如图片加载），父容器高度塌陷或重排会逐层向上传导，抖动范围成倍扩大。
- 检查
<div><div><div> <p> 这类纯样式驱动的包裹，99% 没语义价值，直接删减 </p> <li>用 <code><section></section>、<article></article>替代无意义div堆叠，单个语义容器子元素控制在 50 以内 - Flex/Grid 布局能一步替代 2–3 层包裹，比如三栏不用
<div class="row"><div class="col"> 套两层 <li>浮动元素必须闭合，否则父容器塌陷会把后续 <code><footer></footer>直接顶到顶部，JS 补高度只是亡羊补牢
真正难的不是写对某一行代码，而是所有占位逻辑必须在 HTML 解析阶段就完成——浏览器不等 CSS，也不等 JS，它只信你写进标签里的那几个属性。
