直接用 nav ul { display: flex } 能解决大部分问题，因为 flex 布局天然规避浮动导致的高度塌陷、换行错位等问题，自动水平排列、支持 gap 控制间距、无需清除浮动，且现代浏览器兼容稳定。
为什么直接用 nav ul { display: flex } 就能解决大部分问题
因为现代浏览器对 flex 的支持已非常稳定，display: flex 能天然规避传统 float 布局的清除浮动、高度塌陷、换行错位等问题。它让菜单项自动水平排列、默认对齐基线、支持 gap 控制间距，比手动写 margin-right 更干净。
常见错误现象：用 float: left 后发现 nav 高度为 0，或小屏幕下菜单突然堆叠错乱；这基本都是没清浮动或没设 overflow: hidden 导致的，而 flex 从根源上绕开了这些坑。
-
list-style: none必须加在ul上，不是li—— 否则小圆点仍会残留 -
margin和padding都要重置为0，否则不同浏览器默认值差异会导致左右不对齐 - 如果菜单项文字长度差异大，又强行用
flex: 1等分，右边项可能被撑开溢出容器——优先用gap，慎用等宽分配
gap 比 margin-right 更可靠的具体表现
用 gap: 1rem 替代 li { margin-right: 1rem } 后，最后一个菜单项右侧不会多出空白，也不需要额外写 :last-child { margin-right: 0 }。尤其在动态增删菜单项时，gap 自动生效，不用 JS 或 CSS 重算。
但注意：IE11 及更早版本不支持 gap，若需兼容，得回退到 margin + :last-child 组合；不过当前（2026年）绝大多数生产环境已可安全使用 gap。
- 移动端响应式中，
gap在flex-wrap: wrap下依然有效，折行后上下行之间也有统一间距 -
gap不影响点击热区 —— 而margin-right若设在a标签上，容易导致热区变窄甚至被截断 - 若需兼容旧版 Safari（row-gap /
column-gap分写代替简写gap
固定定位（position: fixed）时最常漏掉的一步
给 nav 加了 position: fixed; top: 0; 后，页面内容会从顶部“消失”——不是代码错了，是 body 缺少对应补偿空间。
必须显式给 body 加 padding-top，值等于导航栏高度（比如 padding-top: 56px）。否则用户滚动时，首屏内容会被遮住，且无法通过调整 nav 的 z-index 解决。
- 如果导航栏高度是动态的（比如字体缩放、行高变化），建议用 CSS 自定义属性配合
calc()，例如：body { padding-top: calc(var(--nav-height, 56px)); } - 不要依赖
margin-top或transform推内容，它们会破坏文档流和锚点跳转行为 - 若同时用了
scroll-behavior: smooth，这个padding-top还会影响平滑滚动的起始位置，务必实测
悬停效果里最容易被忽略的交互细节
a:hover 加背景色或边框本身没问题，但若没设 transition，效果会生硬卡顿；若只加了 transition: background-color 0.3s 却没设 display: block，悬停区域就只是文字大小，点不中。
另外，纯色背景 + 圆角在高 DPI 屏幕上可能出现抗锯齿毛边，加 backface-visibility: hidden 可缓解。
-
a必须设display: block或inline-block，否则padding和border-radius无效 - 避免只改文字颜色——没有视觉反馈的悬停等于没做，用户不确定是否点中了
- 深色主题下，
hover背景色对比度不足会导致可访问性失败，建议用prefers-color-scheme分别定义
flex 只是起点，后续得靠媒体查询、prefers-reduced-motion、:focus-visible 等协同控制。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
