box-sizing: content-box 是布局抖动主因，其 width 仅含内容区，padding 和 border 额外增加尺寸；border-box 则使 width 包含 content、padding 和 border，总宽固定，需全局设置 、::before、*::after { box-sizing: border-box } 并配合明确的 margin/padding/border 分工。
页面加载时布局“抖动”或元素突然位移，绝大多数情况不是JS没跑完，而是盒模型尺寸在渲染过程中发生了不可预测的变化——box-sizing: content-box 是罪魁祸首。
为什么 layout shift 常发生在首次渲染
浏览器默认用 content-box 计算宽度，这意味着：width: 300px 的按钮，加上 padding: 12px 和 border: 2px 后，实际占宽是 328px。如果这个按钮在 DOM 加载后才被 JS 注入样式（比如加了 padding），或者字体加载完成导致内容高度变化，就会触发重排（reflow），造成布局偏移。
- 字体加载前使用 fallback 字体，内容高度小；Web Font 加载后撑高，
margin不会自动补偿，但padding会随内容区扩大而“挤出”空间 - 图片无
width/height属性，加载前尺寸为 0，加载后突然撑开父容器，连带影响兄弟元素位置 - 服务器返回的 HTML 已含内联样式，但 CSS 文件延迟加载，导致初始渲染按默认
content-box计算，样式补上后又重算
box-sizing: border-box 必须全局生效，且越早越好
不能只给某个组件加 box-sizing: border-box，必须在 CSS 最顶部、所有规则之前就声明，否则部分元素仍走默认计算逻辑。现代项目应直接在重置样式中写死：
*,
*::before,
*::after {
box-sizing: border-box;
}
注意两点：
立即学习“前端免费学习笔记（深入）”；
-
*选择器虽有轻微性能代价，但对 layout stability 的收益远大于成本；现代浏览器已优化该匹配 - 务必包含
::before和::after，否则伪元素仍可能用content-box，尤其当它们被赋予width或padding时（比如用伪元素做装饰边框） - 不要用
html { box-sizing: border-box }然后靠继承——box-sizing不继承，必须显式设置到每个元素
padding/margin/border 的分工必须物理隔离
布局抖动常源于把 padding 当 margin 用，或反过来。三者职责不能模糊：
-
padding只用于控制**内容与自身边框之间**的距离，它会影响背景色、边框绘制范围，也参与border-box尺寸计算 -
margin只用于控制**本元素与其他元素之间**的距离，它不占元素自身空间，但会合并（尤其是垂直方向），所以父子/相邻块级元素间慎用垂直margin，优先用gap或 BFC 触发 -
border若仅为预留空间（比如未来要加 focus ring），建议用border: 2px solid transparent而非margin——透明边框计入border-box尺寸，不触发重排，且 focus 时改颜色即可，无需改变布局流
响应式场景下，fr / % / rem 搭配 border-box 才真正稳定
用 width: 50% 做两栏，但忘了 padding 和 border 会额外加宽？box-sizing: border-box 解决了这个问题，但单位选择仍关键：
- 避免混合使用
px+%：比如父容器width: 90%，子元素width: 200px+padding: 16px，在窄屏下必然溢出 - Flex/Grid 中优先用
fr或minmax(200px, 1fr)，它们天然适配border-box，且不依赖具体像素值 - 字体相关留白用
rem，确保缩放时 padding/margin 等比变化；容器尺寸用%或vw，但需配合max-width防止过宽
最易被忽略的是：即使用了 border-box，若父容器本身 width 不稳定（比如未设 max-width 的 section），子元素再怎么算也稳不住——盒模型优化不是孤立技巧，它必须嵌套在整条布局链的确定性里。
