修改 width/height 会强制重排，因它们是盒模型最上游尺寸输入，变化将连锁影响下游所有依赖该尺寸的布局节点；padding/margin 变更同样触发重排，因其改变元素占位空间；box-sizing 切换也会重排，因它重构尺寸求解逻辑。
修改 width/height 会强制重排，因为布局树必须重新计算尺寸链
浏览器在 Layout 阶段要确定每个元素的几何位置和大小，而 width 和 height 是盒模型最上游的尺寸输入。一旦它们变化，所有依赖该尺寸的下游节点（子元素、兄弟元素、浮动清除区、flex/grid 分配结果）都可能被连带影响。
常见错误现象：el.style.width = '200px' 在循环中调用，或在 scroll 回调里动态改宽高，页面立刻卡顿；getBoundingClientRect() 或 offsetWidth 前后紧挨着改 width，会触发强制同步布局，把本可批量合并的重排拆成多次。
实操建议：
- 用
transform: scaleX()模拟宽度缩放（仅适用于视觉缩放，不改变文档流） - 若需真实尺寸响应，优先用 CSS 媒体查询或
clamp()配合flex-basis/grid-template-columns，避免 JS 直接写内联width - 确认是否真需要改尺寸——有时只是想“看起来变窄”，
scaleX(0.9)+transform-origin: left更轻量
padding/margin 变更不只是“加点空隙”，它会破坏布局上下文
padding 和 margin 属于盒模型中直接影响元素“占位空间”的属性。改它们等于告诉浏览器：“这个盒子现在吃掉/释放了更多页面空间”，于是父容器高度、兄弟元素垂直流位置、浮动环绕边界、甚至表格行高都得重算。
立即学习“前端免费学习笔记（深入）”；
典型场景：在 mousemove 中不断设置 el.style.paddingTop = y + 'px'，每帧都触发一次重排；又或者在动画帧中读取 el.scrollHeight 后立即改 margin，导致两次强制 layout。
实操建议：
- 位移类效果一律用
transform: translateY()替代margin-top或padding-top - 响应式留白用
clamp(12px, 4vw, 24px)配合padding，但只在 CSS 中声明，避免 JS 动态赋值 - 如果必须 JS 控制间距（如拖拽调整），先
el.style.will-change = 'transform'，再用transform: translate()模拟，最后 batch 更新真实padding值（非实时）
box-sizing 切换 content-box ↔ border-box 也会重排
很多人以为 box-sizing 只是“怎么解释 width”，但它实际改变了浏览器对尺寸约束的求解逻辑。从 content-box 切到 border-box 时，浏览器必须把已有的 width 值重新分配给 content/padding/border 三部分，这等价于同时改了三个几何属性——必然重排。
容易踩的坑：全局重置 *, *::before, *::after { box-sizing: border-box } 放在自定义样式之后，导致第三方组件（如 Ant Design 的 .ant-btn）仍走 content-box，后续你再手动加 box-sizing: border-box 就会意外触发重排。
实操建议：
- 全局重置规则必须放在所有 CSS 文件最顶部，且不能被
!important覆盖 - 不要在运行时切换
box-sizing值，它是静态布局前提，不是动态样式开关 - SVG 元素（
<rect>,<circle>）完全忽略box-sizing，别指望用它控制 SVG 尺寸
为什么 transform/opacity 不重排，但 top/left 一定重排？
关键区别在于：浏览器把 transform 和 opacity 归为「合成层属性」，只要元素已提升为独立图层（比如有 transform: translateZ(0) 或显式 will-change: transform），GPU 就能单独处理这些变化，跳过主渲染线程的 Layout 和 Paint 阶段。
而 top/left 属于定位偏移，它直接参与 Layout 计算：浏览器得知道该元素最终在文档流中的坐标，才能决定其父容器是否要撑高、兄弟元素要不要下移、是否有 overflow 裁剪发生——这是无法绕开的。
实操建议：
- 绝对定位元素的位移，统一用
transform: translate(x, y)，别碰top/left -
opacity动画安全，但注意：如果元素本身因display: none或visibility: hidden不在渲染树中，设opacity: 0不生效——先确保它可见 -
will-change: transform不是万能药，滥用会导致内存占用上升，只在真正高频动画的元素上加
offsetHeight、getComputedStyle(el).height）本身就会触发同步重排**，哪怕你接下来什么都没改。 
