根本原因是box-sizing默认为content-box：width:100%仅设内容宽，padding和border额外叠加导致总宽超视口；需改用border-box或清body margin、设max-width等。
width: 100% 为什么还会撑出横向滚动条
根本原因不是 width 写错了，而是浏览器默认用 box-sizing: content-box 计算尺寸：此时 width: 100% 只管内容区宽度，padding 和 border 会额外加在它外面。比如父容器 content width 是 375px，子元素设了 width: 100% + padding: 20px，实际总宽就是 375px + 40px = 415px，直接超出视口。
这种溢出在移动端尤其明显——哪怕只多出 1px，overflow-x 默认是 visible，浏览器就会强制显示横向滚动条。
如何快速确认是不是 box-sizing 导致的
打开 DevTools，选中疑似溢出的元素，在右侧面板切到「Computed」标签页，查 box-sizing 值：
- 如果是
content-box（浏览器默认），且该元素有padding或border，基本就是它了 - 再看「Layout」面板里「Total size」的宽度是否大于父容器或视口宽度
- 临时加一句
box-sizing: border-box到该元素样式里，刷新看滚动条是否消失
全局设置 box-sizing: border-box 的坑点
很多人写 * { box-sizing: border-box; } 就以为万事大吉，但要注意：
- 第三方 UI 库（如 Element Plus、Ant Design）可能重置过自己的
box-sizing，需检查其 CSS 是否覆盖了你的全局规则 -
*::before和*::after伪元素也必须显式包含在重置里，否则它们仍按content-box渲染，可能悄悄撑宽布局 - 某些老项目用了
html { font-size: 62.5%; }配 rem，如果重置写在 rem 设置之后，而某些组件又依赖原始content-box行为，视觉尺寸可能微调
除了 box-sizing，还有哪些地方会“偷偷加宽”
即使 box-sizing 正确，以下情况仍会导致横向滚动条：
-
img、video、pre等元素没设max-width: 100%，原始尺寸超宽时直接突破父容器 - 绝对定位元素的
left/right值用了固定像素（如right: -20px），移出边界却不触发overflow: hidden - flex 容器里子项用了
flex-shrink: 0+ 固定宽度，当空间不足时拒绝收缩，硬挤出滚动条 - body 默认有
margin（通常是 8px），没清掉的话，整个页面就先多了 16px 总宽
最稳的排查方式：在 body 上临时加 outline: 1px solid red，再逐个 hover 子元素，看哪个轮廓明显凸出视口边缘——那个就是真凶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
