结论：不统一 box-sizing 会导致 flex 布局和间距控制出错，尤其导航栏易撑破容器或错位；必须全局设置 box-sizing: border-box，并用 gap 替代 margin、flex 垂直居中、min-width 配合 flex-wrap 实现可靠响应式。
直接说结论：不统一 box-sizing，后续所有 Flex 布局、间距控制都容易翻车——尤其是导航栏这种对尺寸敏感的区域。
为什么必须先设 box-sizing: border-box
浏览器默认用 content-box，意味着你写 width: 100px，加上 padding: 12px 和 border: 2px 后，实际占宽是 128px。导航栏常带 padding 和 border，一旦多个 li 或 a 元素叠加计算，很容易撑破容器、换行或错位。
解决方法很简单，全局重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样之后，width 和 height 就真正代表“整个盒子”的尺寸，Flex 的 flex: 1、gap、padding 都能按预期工作。
gap 替代 margin 控制导航项间距
用 margin 给每个 li 加右边距，首尾会多出无效空白；用 gap 则只在项目之间生效，干净且可控。
- 必须确保父容器是
display: flex（比如.navbar ul） -
gap不受 margin 折叠影响，也不需要额外清除首尾边距 - 小屏下可配合媒体查询缩放：
@media (max-width: 768px) { .navbar ul { gap: 8px; } }
错误示例：.nav-item { margin-right: 16px; } → 最后一项多出 16px 空白，可能触发水平滚动。
Flex 容器高度 + align-items: center 实现垂直居中
导航栏高度固定（如 height: 60px）时，子元素文字上下不对齐，本质是 line-height 和 padding 计算混乱。用 Flex 的交叉轴对齐最稳。
- 必须给父容器（如
.navbar ul）设置明确高度，否则align-items: center无参照 -
align-items: center对a、span、img都生效，不用单独调每个子元素的line-height - 如果导航栏里混有图标和文字，图标默认基线对齐，加
vertical-align: middle可能仍不一致；Flex 是唯一可靠解法
响应式换行时，flex-wrap: wrap 要配 min-width
小屏下菜单项挤成一行导致文字折行或溢出，不是靠 flex: 1 就能解决的。
- 给每个
li设min-width: 120px（根据文字长度估算），再设flex-wrap: wrap，才能自然折行 - 只设
flex-wrap: wrap不设min-width，项目会无限压缩，文字被挤成一坨 - 搭配
@media切换flex-direction: column也行，但需重设align-items和gap方向
盒模型是地基，Flex 是梁柱——地基没打牢，梁柱再漂亮也会歪。很多人调了半天 justify-content 和 gap，最后发现只是忘了那行 box-sizing: border-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
