用 transform: scale() 替代 width/height 修改可避免重排：scale 以自身中心放大且不改变文档流占位，配合 transform-origin: center 和 position: relative + z-index 可实现平滑变大不跳动效果。
hover 时列表项变大导致其他项跳动
这是典型的布局重排（reflow）问题：:hover 改变了 width、height、padding 或 margin，浏览器必须重新计算所有后续元素的位置。相邻 li 会跟着“抖一下”，尤其在垂直排列的 ul 中特别明显。
用 transform: scale() 替代尺寸修改
transform 属于合成层操作，不触发重排，只触发布局后的绘制与合成，性能好且不影响兄弟元素。关键点是：缩放以自身中心为原点，不侵占或释放空间。
- 必须配合
transform-origin: center（默认就是center，但显式写上更稳妥） - 避免同时设置
width/height动画，否则仍会重排 - 如果需要“撑开背景”，用
background+padding配合transform，别碰盒模型尺寸
li {
transition: transform 0.2s ease;
}
li:hover {
transform: scale(1.05);
}
为什么 translate 不行？scale 就可以？
transform: translate() 确实也不重排，但它只是“挪位置”，不会让元素视觉上“变大”；而 scale() 在保持文档流占位不变的前提下放大渲染结果——这才是你想要的“hover 变大却不挤别人”的效果。
-
translate()：移动元素，原位置留空 → 兄弟元素不动，但 hover 项看起来“飘”了 -
scale()：原地等比放大，占位框（layout box）尺寸完全不变 → 兄弟元素毫无感知 - 若需同时偏移+放大，用
transform: translateX(4px) scale(1.05)，依然安全
边界裁剪和 z-index 需要额外处理
放大后内容可能溢出父容器或遮挡相邻项——这不是重排问题，而是层叠与裁剪问题。
立即学习“前端免费学习笔记（深入）”；
- 父
ul加overflow: hidden可裁掉溢出部分（慎用，可能切掉阴影或圆角） - 给
li:hover加z-index: 1，确保放大后压在兄弟之上（注意：z-index只对定位元素生效，所以得加position: relative） - 如果列表有
gap，scale后视觉间隙会变小，可微调gap值或改用margin控制间距
li {
position: relative;
transition: transform 0.2s ease;
}
li:hover {
transform: scale(1.05);
z-index: 1;
}
实际中最容易忽略的是：忘了给 li 设 position: relative 就直接加 z-index，结果 z-index 完全不生效。 
