盒模型是导航栏稳定布局的底层保障，必须全局设置box-sizing:border-box，flex项用flex-basis替代width，移动端点击区域需min-height:44px保底，断点内盒尺寸属性须成对重置。
盒模型不是导航栏的“装饰项”，而是它不溢出、不换行、点击区域不缩水的底层保障。漏掉 box-sizing: border-box，所有 flex 尺寸计算都会偏移，尤其在小屏下极易触发横向滚动或文字截断。
必须全局重置 box-sizing，不能只设 nav 或 ul
默认 content-box 下，width: 100px + padding: 12px + border: 1px 实际占宽 126px，而 flex 分配空间时仍按 100px 算——这直接破坏等分逻辑。
-
* { box-sizing: border-box; }是起点，不是可选项 - 子元素如
a、button必须继承，否则 padding 会外扩，导致点击高度不足 - 若用了 Ant Design、Element Plus 等 UI 库，检查其 reset 是否覆盖了该规则；冲突时仅调试阶段用
!important
flex-basis 替代 width 控制导航项尺寸
在 flex 容器里写 width: 20% 是典型陷阱：它和 flex-shrink 冲突，内容稍长就会被压缩换行，图标错位。
- 等宽分布（5 个菜单）：
flex: 1 1 0; min-width: 80px; - Logo 固定宽度：
flex: 0 0 auto;，让内容决定尺寸 - 汉堡按钮保底触控：
flex: 0 0 44px; - 绝对避免：
width和flex混用在同一元素上，渲染行为不可预测
移动端点击区域不足？根源在盒模型没兜住 padding 和 line-height
PC 上 padding: 8px 看似够用，但手指接触面积远大于光标；若 padding 未被 border-box 纳入计算，再叠加 line-height 不匹配，真实可点高度可能低于 44px 标准。
立即学习“前端免费学习笔记（深入）”；
- 强制保底：
min-height: 44px直接作用于a或button - 垂直居中更可控：
line-height: 44px（与min-height一致），比靠padding推更稳 - 左右留白：
padding: 0 16px，避免文字贴边 - 验证必须用 Chrome DevTools 的 “Toggle device toolbar” 真机模式，别信模拟器像素值
媒体查询里盒模型属性必须成对出现
常见错误是在 @media (max-width: 768px) 里只改 display: block，却忘了 flex-direction、justify-content 还在生效——结果容器已不是 flex，但子项仍按 flex 规则跑，布局直接断裂。
- 断点内统一管理：
flex-direction: column替代display: block - 如果要用堆叠式汉堡菜单，确保父容器保持
display: flex，只是改主轴方向 - 所有影响盒尺寸的属性（
padding、gap、min-width）都要在断点内重新声明，不能依赖继承
最容易被忽略的是：盒模型的修正必须贯穿整个 DOM 路径，从 nav 到最内层 a，任何一环漏掉 border-box 或混用 width，都会在某个屏幕宽度下突然崩掉——这不是 bug，是盒模型逻辑必然的报应。
