三根线必须用绝对定位而非margin，因transform动画对margin无效，绝对定位可精准控制top和width、不占文档流；父容器需设position: relative，三条线统一用display: block+width: 100%，以中间线为轴心对称布局，transform-origin必须设为center，伪元素扩大点击热区。
为什么三根线必须用绝对定位而不是 margin 挤出来
因为响应式菜单常要动画旋转成叉号，transform 对 margin 无感，而绝对定位的元素能精准控制每条线的 top 和 width，且不占文档流，避免父容器高度被撑开。用 margin 或 flex 排布看似简单，但后续做 rotate(45deg)、translateY() 等交互动画时，三条线会互相错位或覆盖。
常见错误现象：line 2 在动画中消失、三条线旋转后叠成一根、点击后菜单没弹出（其实是定位导致 z-index 层级错乱）。
- 父容器必须设
position: relative，否则子元素的position: absolute会相对于 body 定位 - 三条线统一用
display: block+width: 100%，避免不同浏览器对inline元素transform的渲染差异 - 别给线加
height: 2px后再用background—— 改用border-top更稳定（尤其在缩放或高 DPR 屏幕下）
三条线的 top 值怎么算才不会错位
核心是“以中间线为轴心”，上下两条线对称偏移。假设线高 2px，间距 6px，那么：中间线 top: 50% 并 transform: translateY(-50%)；上线下移 -6px，下线上移 +6px —— 但注意，这个 6px 是视觉间距，不是 top 差值。
正确写法：
.line-1 { top: 0; }
.line-2 { top: 50%; transform: translateY(-50%); }
.line-3 { top: 100%; transform: translateY(-100%); }
这样写兼容性好、无需硬编码像素值，且适配字体缩放或 rem 变化。
- 如果用固定像素（如
top: 8px），在移动端横屏或系统字体放大时极易错行 - 别用
flex-direction: column+justify-content: space-between替代 —— 它无法配合transform做独立旋转 - 所有线必须同宽、同背景色、同
transition: top 0.3s, transform 0.3s，否则动画不同步
汉堡图标动起来时，为什么第二条线总“跳一下”
这是最常被忽略的细节：transform: rotate() 默认以元素中心点旋转，但 line-2 如果没显式设置 transform-origin，在某些浏览器（尤其是 Safari）里会因四舍五入取整导致首帧偏移。
解决方案只有一条：统一设 transform-origin: center，且三条线都加。
-
line-1要转 45deg →transform: rotate(45deg) translateX(4px) -
line-2要隐藏 →transform: rotate(0) scale(0)（别用opacity: 0，它不触发硬件加速） -
line-3要转 -45deg →transform: rotate(-45deg) translateX(-4px) - 所有
transform必须写在同一声明里，分两行写（比如先rotate再translate）会导致 Safari 渲染异常
移动端点击区域太小，怎么扩大又不破坏布局
汉堡图标本身常只有 24×24px，但 WCAG 要求最小触控区 44×44px。不能直接放大图标，否则三条线变粗、间距失衡；也不能用 padding，会撑开父容器、影响导航栏高度。
正确做法：用 ::before 伪元素盖一层透明热区。
.hamburger::before {
content: "";
position: absolute;
inset: -10px;
z-index: 1;
}
这里 inset: -10px 相当于 top: -10px; right: -10px; bottom: -10px; left: -10px，把可点击范围扩大 10px，且完全不影响三条线的定位逻辑。
- 别用
outline或box-shadow模拟热区 —— 它们不响应点击事件 - 如果父容器有
overflow: hidden，伪元素会被裁剪，此时改用padding+margin负值组合（但需同步调整line的top） - 务必加
z-index: 1，否则在某些层叠上下文中，伪元素可能被其他元素挡住
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
