width过渡失效因不支持auto插值；图标对齐用vertical-align:middle或em单位；小屏汉堡图标需button包裹且热区≥44px；动效卡顿源于width/padding/border触发重排，应只过渡transform和opacity。
用 width 过渡实现侧边菜单展开收缩，为什么常失效？
因为 width 从 0 到 auto 无法过渡——浏览器不支持 auto 值的动画插值。常见现象是菜单瞬间弹出，或根本不动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用固定宽度（如
240px）配合width+overflow: hidden，避免auto - 或者换用更稳妥的
transform: scaleX()，对性能更友好且天然支持0 → 1 - 若必须用
width，可先用 js 测量内容宽度并设为具体像素值，再过渡
css 图标如何和文字对齐又不破坏响应式？
图标（尤其 font-awesome 或 SVG）默认行内基线对齐，容易和文字错位，缩放时还可能模糊或溢出容器。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图标加
vertical-align: middle或-webkit-font-smoothing: antialiased（针对字体图标） - SVG 图标优先用
background-image或内联<svg></svg>，设height: 1em; width: 1em; vertical-align: -0.125em - 避免在图标上直接设
font-size或width/height百分比，改用em或rem继承父级文字大小
响应式断点下菜单收起后，如何保证图标可点击且不被遮挡？
小屏时菜单常折叠为汉堡按钮，但图标若放在 position: absolute 容器里，可能被父级 overflow: hidden 截断，或点击热区太小。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 汉堡图标用
<button></button>包裹，内部用<span></span>模拟三横线，确保语义和可访问性 - 避免依赖纯 CSS 的
:hover显示菜单——移动端没有 hover，必须靠 JS 切换is-open类 - 收起状态下的图标容器，最小尺寸至少
44px × 44px（ios 触控最小推荐区域）
过渡动效卡顿或闪烁，跟哪些 CSS 属性有关？
常见于使用 width + padding + border 一起过渡时，触发重排（reflow），尤其在低端安卓机上明显掉帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对
transform和opacity过渡——它们走合成层，不触发布局计算 - 给菜单容器加
will-change: transform（仅在需要时，避免滥用） - 禁用
box-sizing: border-box下的padding过渡；改用transform: translateX()移入移出
真正麻烦的是图标和文字在不同缩放比例下的像素对齐问题——比如 1.25x 缩放时 SVG 边缘发虚，这个得靠 shape-rendering: crispEdges 或导出双倍尺寸 SVG 来压，不是加个 transition 就能解决的。