优先用 position: sticky，它天然支持文档流、不脱离布局、兼容性足够；仅需兼容 IE 或强制视口钉死时才用 fixed，并手动给 body 加 padding-top 避免遮挡内容。
顶部菜单用 position: fixed 还是 sticky？
优先用 position: sticky，它天然支持文档流、不脱离布局、兼容性也够（Chrome 56+、Firefox 59+、Safari 15.4+）。只有需要兼容 IE 或必须让菜单始终“钉死”在视口顶部（比如滚动时遮挡内容）才退回到 position: fixed。
用 fixed 要手动给 body 加 padding-top 补齐高度，否则内容会被菜单盖住；而 sticky 只要设 top: 0，浏览器自动处理占位。
常见错误现象：fixed 后左侧导航栏或内容区顶部被截断——没加 body { padding-top: 60px; }（假设菜单高 60px）。
菜单项水平排列用 display: flex 还是 inline-block？
flex 是当前最稳妥的选择。它天然支持等宽/等距/右对齐、响应式收缩、垂直居中，且不会因换行或空格产生额外间隙。
使用场景举例：后台菜单常需右侧放用户头像、通知图标，justify-content: space-between 一行就能搞定；若用 inline-block，得靠 text-align + float + 清除浮动，维护成本高。
注意点：
-
flex容器要设height或line-height才能让子项垂直居中 - 避免对
a标签设display: block后又忘加height，导致点击热区变小 - 移动端折叠菜单前，先用
flex-wrap: wrap测试是否自然折行，而不是直接上 JS 切换
怎么让菜单在小屏下收成汉堡按钮？
核心不是“怎么动画”，而是“怎么切换 DOM 结构可见性”。推荐用纯 CSS 控制 display 或 visibility，配合一个隐藏的 checkbox（避免 JS 依赖）。
实操建议：
- 用
input[type="checkbox"]+label模拟开关，避免 JS 绑定事件失败导致菜单打不开 - 小屏菜单用
position: absolute+top: 100%贴在主菜单下方，不要用fixed，否则会盖住整个页面 - 过渡动画只加
max-height和opacity，别对display做 transition（无效） - 务必测试焦点顺序：按 Tab 键时，汉堡按钮 → 菜单项 → 下一个可聚焦元素，不能跳空
错误示例：@media (max-width: 768px) { .menu { display: none; } .menu.active { display: block; } }——display 切换无法触发 CSS 过渡。
后台菜单常被忽略的细节：键盘导航与焦点管理
后台系统必须支持键盘操作，但多数人只写了鼠标 hover 效果。重点不在“加 tabindex”，而在“保持焦点逻辑闭环”。
关键动作：
- 菜单项用
a标签而非div，原生支持Enter和Space触发 - 展开子菜单后，焦点应自动移到第一个子项（用
focus()），否则键盘用户得连按多次 Tab - 按
Esc关闭子菜单时，焦点应回到父菜单项，而不是丢失在 body 上 - 禁用状态菜单项必须设
aria-disabled="true"，且移除href或加tabindex="-1"
最容易被跳过的点：子菜单关闭后，父项的 aria-expanded="false" 没同步更新——屏幕阅读器会误判状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
