文字hover放大不偏移布局的关键是用transform: scale()替代font-size或宽高变化，配合transition和transform-origin控制缩放中心，并确保元素保持原有占位空间。
文字 hover 放大时布局偏移，本质是默认用 font-size 或 width/height 放大会触发重排（reflow），导致周围元素位置变动。最稳妥的解法是改用 transform: scale() 配合 transition，它只触发布局后的重绘（repaint），不改变文档流，自然不挤占空间、不偏移布局。
确保放大不改变原始占据空间
关键在于：放大的元素必须保持原有尺寸占位。只需给元素加 transform: scale(1) 的初始状态，并用 transform-origin 控制缩放中心（如居中缩放更自然）：
- 给文字容器（如
<span></span>或<a></a>）设display: inline-block或inline-flex（避免 inline 元素对 transform-origin 响应不稳定） - 设置
transform-origin: center（默认是 center，但显式声明更可靠） - 初始态写
transform: scale(1)，hover 时写transform: scale(1.2)
搭配 transition 实现平滑过渡
仅加 transform 不够，需指定过渡属性和时长，否则是瞬时跳变：
- 在常态样式中加
transition: transform 0.2s ease（推荐用ease或cubic-bezier提升质感） - 避免写
transition: all 0.2s—— 容易意外触发其他属性动画，影响性能 - 如需更精细控制，可加
will-change: transform（仅在必要时，慎用）
处理 inline 元素的常见坑
纯 <span></span> 等 inline 元素直接 scale 可能因基线对齐（baseline）导致视觉上“上跳”或“下沉”：
立即学习“前端免费学习笔记（深入）”；
- 加
vertical-align: middle或top统一对齐方式 - 或包裹一层
display: inline-block的父容器，把 transform 放在父层上，子元素保持正常流 - 测试时用浏览器开发者工具勾选 “Layout Shift Regions”，直观查看是否仍有偏移
基本上就这些。核心就一条：用 transform 替代尺寸类属性，守住文档流不动，放大就只是视觉变化，不扰动布局。
