导航容器需脱离文档流或撑满视口宽度，关键在于清除body默认margin、使用width:100vw+left:0，配合flex布局与响应式断点调整。
导航容器必须脱离文档流或撑满视口宽度
默认情况下 <nav></nav> 或 <div class="nav"> 是块级元素，但它的宽度只包裹内容，不会自动铺满整个屏幕。关键不是加 <code>width: 100%，而是要确认它父容器没留边距、没设 max-width 限制，且自身没被浮动或定位意外收缩。
最稳妥的做法是给导航外层加 width: 100vw，并配合 left: 0; position: relative（或 position: sticky）确保它真正在视口左边界起始：
.nav {
width: 100vw;
left: 0;
position: relative;
margin: 0;
padding: 0;
}
如果导航放在 直接子级，还要检查 body 是否有默认 margin —— 大部分浏览器会给 body 加 8px 外边距，这会导致导航右侧留白。
横向布局用 flex 而不是 float 或 inline-block
老方案用 float: left 或 display: inline-block 容易因空格/换行产生间隙，且难以对齐和等分布局。现代写法直接上 display: flex，一行解决对齐、换行控制和间距分配。
立即学习“前端免费学习笔记（深入）”；
常见错误是只加 display: flex 却忘了设 flex-wrap: nowrap，导致小屏幕下导航项折行，破坏“横向”预期：
-
flex-wrap: nowrap强制所有菜单项保持单行（必要） -
justify-content: center/space-between控制项间分布 - 每个菜单项用
flex: 0 0 auto防止被压缩（尤其含图标或文字长度不一）
响应式断点要重置宽度和布局方式
全屏宽度在手机上反而成问题：导航项挤成一团、文字折行、点击热区过小。不能只靠 vw 一招打天下。
典型处理是在 768px 下切换为汉堡菜单，但即使不换结构，也要调整布局：
- 小屏下改用
width: 100%（而非100vw），避免滚动条干扰 - 菜单项文字用
white-space: nowrap防止意外折行 - 如果用了
position: sticky，需测试 Safari 对sticky+flex的兼容性（iOS 15.4 前有渲染异常）
滚动时固定定位容易错位
很多人想做「吸顶导航」，直接加 position: sticky; top: 0，结果发现右侧突然出现滚动条，或者导航在滚动瞬间跳动——根本原因是 sticky 元素仍受父容器 padding 或 overflow 影响。
修复要点很具体：
- 父容器不能有
overflow: hidden（会截断sticky行为） - 导航自身避免设
right: 0，改用width: 100vw+left: 0 - 若导航内有阴影或边框，用
box-sizing: border-box防止宽度计算溢出
真正难调的其实是字体抗锯齿和 subpixel 渲染导致的 1px 错位，这种问题没法靠 CSS 完全规避，得接受它在某些缩放比例下就是看起来“差一点”。
