width: 100% + padding 溢出是因浏览器默认 box-sizing: content-box，width 仅含内容区，padding 和 border 额外叠加；须全局设置 , ::before, *::after { box-sizing: border-box; }，并验证 computed 面板生效，同时处理 margin、bfc、min-width: 0 等协同问题。
直接加 box-sizing: border-box 不够，必须确保它真生效、覆盖到所有相关元素，且配套处理 margin 和父容器约束。
为什么 width: 100% + padding 会溢出
浏览器默认用 box-sizing: content-box，此时 width 只管内容区，padding 和 border 是额外加在外部的。比如导航项设 width: 50% + padding: 8px，实际占宽就是 50% + 16px —— 缩放或小屏下极易四舍五入超限，触发换行或横向滚动条。
更隐蔽的是：父容器（如 nav）自身有 padding: 0 20px，它的 content 区已变窄；子项再按 width: 100% 算，叠上自身 padding，必然撑破。
- 浮动导航栏错行，90% 源于此
- Flex 导航项中
input或button被挤到下一行，也常因这个叠加 - 表单类导航控件（如搜索框）尤其明显，因它们自带浏览器默认
padding和border
必须全局设置 box-sizing: border-box
只给导航项加 box-sizing: border-box 是无效的。它不继承，父容器仍按 content-box 计算可用宽度，子项的 width: 100% 就是错的基准。
正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}
原因：
-
*覆盖所有元素 -
*::before和*::after覆盖伪元素（很多 UI 库靠它们实现图标、分隔符等，漏掉就会悄悄溢出） - Bootstrap、Element Plus 等库可能重置过
box-sizing，用通配符能兜底
别写 html, body { box-sizing: border-box; }——子元素不会继承，白写。
还要检查这些关键点
box-sizing: border-box 解决了尺寸归属逻辑，但不是万能解药。以下问题仍会导致溢出：
-
margin永远算在总尺寸之外，加了border-box也没用。检查导航项是否有margin-right或父容器有margin - 浮动布局中，父容器必须形成 BFC（如加
display: flow-root），否则高度塌陷，百分比宽度按 0 计算 - Flex 容器里的
input、textarea默认min-width: auto，得显式加min-width: 0才能收缩 - 固定定位导航栏（
position: fixed）要确认left: 0和right: 0都设了，否则受body默认margin干扰
最可靠验证方式：打开 DevTools → 选中导航项 → 切到「Computed」面板 → 直接查 box-sizing 值是否为 border-box。这是唯一可信依据。
修复后仍要核对视觉意图
即使所有样式都生效，也要确认设计目标是否达成：
- 是要对齐父容器的 content 区？还是顶满父容器边框（即视觉上“贴边”）？
- 如果用了
scroll-padding-top修复锚点遮挡，它的值必须等于导航栏「视觉占用总高度」，不是单纯height，得查 Computed 面板里height+padding-top+border-top-width+ 阴影扩散 - 移动端导航栏折叠后变矮？别写死数值，改用媒体查询或 CSS 变量（如
:root { --nav-height: 64px; }）
复杂布局里，box-sizing 是起点，不是终点。漏掉伪元素、替换元素或 BFC 缺失，都可能让溢出在某个缩放比例或设备上突然出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
