优先用 position: sticky，它不脱离文档流、自动占位、滚动到临界点才吸顶，无需手动设置 body padding-top；仅当需兼容 ie 或必须强钉视口顶部时才退回到 fixed。
顶部菜单用 position: sticky 还是 position: fixed？
优先用 position: sticky。它不脱离文档流，自动占位，滚动到临界点才“吸顶”，不用手动计算 body 的 padding-top。现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+）都支持，够用。
只有两种情况才退回到 fixed：需要兼容 IE；或菜单必须“钉死”在视口顶部（比如遮挡下方内容的强提示场景）。用 fixed 时，必须同步加 body { padding-top: 60px; }（假设菜单高 60px），否则正文第一屏会被盖住——这是最常被忽略的一步。
常见错误现象：fixed 后左侧导航栏或主内容区顶部被截断，就是没补这个 padding-top。
横向菜单项怎么排布？display: flex 是当前唯一推荐方案
别碰 float，也别靠 inline-block 死磕空格和换行间隙。用 flex 能一行解决对齐、等距、右对齐、垂直居中、响应式折行所有问题。
关键细节：
• nav 容器设 display: flex 和 align-items: center，子项才能真正垂直居中；光设 line-height 不稳定
• 每个 a 标签必须设 display: block 或 inline-block，否则点击热区只在文字上，用户会点不中
• 需要右侧放头像/通知图标？用 justify-content: space-between，比 text-align + float 干净十倍
• 移动端折叠前，先加 flex-wrap: wrap 看是否自然折行，别一上来就写 JS 切换
小屏怎么收成汉堡按钮？纯 CSS 实现的关键三步
核心不是动画，而是切换可见性。用 input[type="checkbox"] + label + :checked 伪类，零 JS 依赖，加载失败也不瘫痪。
实操要点：
• HTML 里放一个隐藏的 <input type="checkbox" id="menu-toggle"> 和对应 <label for="menu-toggle">☰</label>
• 菜单 ul 默认 display: none，用选择器 #menu-toggle:checked ~ nav ul 触发显示（注意顺序，不能写反）
• 小屏下拉层必须用 position: absolute 或 top: 100%，千万别用 fixed，否则会盖满整个页面
• 动画只加 max-height 和 opacity，display 无法 transition——写了也无效
• 必须测试 Tab 键焦点顺序：汉堡按钮 → 第一个菜单项 → 下一个可聚焦元素，跳空等于键盘不可用
Safari 上 a:hover 没反应？缺了基础链接样式
Safari 对未访问（:link）和已访问（:visited）链接有严格限制：hover 时改 background-color、border、transform 都会被无视，除非你显式定义过基础状态。
解决方案很简单：
• 统一加 a:link, a:visited { color: #333; text-decoration: none; }
• hover 和焦点样式合并写：a:hover, a:focus { background-color: #f0f0f0; }，既保鼠标反馈，也保键盘用户可用
性能影响不大，但不处理会导致 iOS 用户觉得“菜单点不动”，实际只是样式没生效。
最后提醒一句：移动端 meta viewport 标签不能漏，否则媒体查询失效，所有响应式逻辑归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
