盒模型导致布局抖动的本质是状态变化时元素实际占位空间突变引发重排；解决关键在于保持hover、加载、缩放等前后尺寸和位置恒定，box-sizing: border-box是底线，需配合禁用padding/margin变更、建立BFC、使用transform/opacity动画及html级scrollbar-gutter控制滚动条占位。
盒模型导致的布局抖动，本质是元素在状态变化时**实际占位空间发生突变**，浏览器被迫重排（reflow）。这不是动画不顺，而是布局树被反复修改。解决的关键不是“加过渡”，而是让 hover、加载、缩放等操作前后，元素对外暴露的尺寸和位置关系保持恒定。
box-sizing: border-box 是底线，不是可选项
没设 box-sizing 时，border 或 padding 变化会额外撑开容器，导致宽度跳变。比如按钮常态 border: 0、hover 加 border: 2px solid #007bff，实际宽高瞬间 +4px。
- 所有涉及边框/内边距变化的元素，必须统一设
box-sizing: border-box - 全局重置更稳妥：
* { box-sizing: border-box; }，避免遗漏 - 若已用
border-box还抖，检查是否同时改了padding或margin—— 它们仍会触发重排
浮动布局抖动：别锁 width，要建 BFC
给浮动父容器设 width: 300px 不但无效，还可能放大抖动。因为浮动元素脱离文档流，父容器高度塌陷，后续内容绕排基准漂移，width 只是硬卡一个数字，掩盖不了布局逻辑断裂。
- 真正解法是让父容器形成 BFC：
overflow: hidden或overflow: auto - 浮动子元素自身也要检查总宽度：
width+padding+border是否超出父容器，尤其缩放或字体加载后 - 移动端双击缩放后重排更剧烈，需配
text-size-adjust: none和user-scalable=no（或maximum-scale=1.0）
动画抖动：脱离文档流 + 禁用 layout 属性
加了 position: absolute 还抖？大概率是没锚定到预期父容器——它相对于 <html> 定位了。即使脱离了流，若初始状态仍用 left、top 或 margin 控制位置，动画中只要这些值一变，就重回重排路径。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须显式设
position: relative，否则absolute失效 - 动画只用
transform（如translateX、scale）和opacity，禁用left、width、margin - 加
backface-visibility: hidden强制稳定 GPU 合成层，比will-change更轻量且无内存风险
滚动条出现引发的横向抖动
滚动条从无到有，视口宽度收缩约 16–17px，所有依赖 100% 的元素都会被压缩重排。这不是 bug，是浏览器行为。直接写 body { overflow-y: scroll } 也不行，因为根容器是 html，不是 body。
- 现代解法：
html { overflow-y: auto; scrollbar-gutter: stable both-edges; } - 兼容降级：
body { padding-right: calc(100vw - 100%); }动态计算滚动条宽度，无需硬编码 - 禁用
overflow: overlay—— 已废弃，Chrome/Firefox 均不响应
最常被忽略的一点：抖动往往来自“半迁移”——比如动画属性全改成了 transform，但初始状态仍保留着 margin-left: 20px；或者 box-sizing 加了，但 hover 里偷偷加了 padding。验证是否真解决，得盯紧开发者工具的 Computed 面板，看 hover 前后 width、margin、border-width 这几项数值是否分毫不差。
