最准最快的盒模型溢出排查法是用outline高亮所有scrollWidth>clientWidth+1的元素，再逐个检查computed width+padding+border+margin总和是否超父容器；需验证box-sizing是否真正生效，特别注意伪元素、img/svg/iframe、flex子项、table及white-space:nowrap等场景。
直接用 outline 高亮所有越界元素，再逐个检查 computed width + padding + border + margin 总和是否超出父容器 —— 这是最准、最快、不依赖经验的排查路径。
用 outline 快速定位溢出源
别靠肉眼扫或猜哪个组件“看起来不对”。打开 DevTools 控制台，粘贴执行：
$$('*').forEach(el => { if (el.scrollWidth > el.clientWidth + 1) el.style.outline = '2px solid red' })被标红的元素就是实际渲染宽度超限的真凶。注意：scrollWidth > clientWidth 是硬指标，比看视觉滚动条更早暴露问题（比如只多 1px 就会触发）。
- 这个脚本覆盖所有元素，包括伪元素（
::before/::after），但不包含display: none或visibility: hidden元素 - 如果页面用了 Shadow DOM，需单独进
shadowRoot执行；React/Vue 组件内动态生成的元素也一样有效 - 执行后若无红框，说明溢出不在 DOM 渲染层，可能是 SVG path、Canvas 绘图、或字体度量异常等更底层问题
检查 box-sizing 是否真正生效
box-sizing: border-box 不继承，只作用于声明它的那个元素。全局写了 * { box-sizing: border-box }，不代表所有子元素都按 border-box 算 —— 第三方组件、all: unset、CSS-in-JS 动态样式都可能覆盖它。
立即学习“前端免费学习笔记（深入）”；
- 在 DevTools 的「Computed」面板里，点开任意疑似溢出的元素，直接看
box-sizing值是不是border-box，而不是inherited或content-box - 特别关注伪元素：很多 UI 库用
::before插入图标或装饰，它们默认仍是content-box，哪怕父元素设了border-box - 如果项目用了 Bootstrap 4+，它自带
* { box-sizing: border-box }，但老版本或自定义构建可能漏掉*::before, *::after部分
留意那些 box-sizing 也救不了的溢出场景
box-sizing: border-box 只改尺寸计算逻辑，不约束内容本身是否可缩放或换行。以下情况即使开了它，仍会溢出：
-
img、svg、iframe：必须加max-width: 100%和height: auto（iframe还要补width: 100%） - Flex 容器里的
input、button：默认min-width: auto，浏览器宁可撑破也不压缩长 URL 或连续无空格文本；得显式写min-width: 0 - 表格（
table）：无视max-width和box-sizing，得配table-layout: fixed+width: 100% - 带
white-space: nowrap的文本：需要overflow: hidden+text-overflow: ellipsis，且三者必须同级生效
移动端视口单位陷阱
用 width: 100vw 做全宽容器时，在 Windows 下它包含垂直滚动条宽度（约 17px），导致容器比视口宽；iOS Safari 则把根滚动容器定在 html 上，body 的 overflow-x: hidden 完全无效。
- 替代方案：优先用
width: 100%；若必须用视口单位，改用100dvw（dvw是动态视口单位，排除滚动条） - 修复横向滚动条：必须给
html设overflow-x: hidden，同时重置body { margin: 0 }（否则默认 8px × 2 = 16px 溢出） - 检查
meta viewport是否完整：<meta name="viewport" content="width=device-width, initial-scale=1">缺一不可
最常被忽略的是伪元素和 min-width: auto —— 它们不会报错，也不会在 CSS 文件里显眼，但会在小屏下突然让整页横向滚动。每次上线前，用 outline 脚本跑一遍，再点开两个红框元素看 computed 值，基本就能堵死 95% 的盒模型溢出。
