横向滚动条出现的主因是元素总宽度超出容器或视口，根源于 box-sizing: content-box 下 padding/border 被额外计算；应全局设 * { box-sizing: border-box; }，并排查父容器宽度、伪元素、绝对定位等隐形溢出源。
横向滚动条出现，大概率是元素总宽度超出了容器或视口宽度。核心原因在于 CSS 盒模型中 padding、border、margin 被默认计入布局计算，导致实际占用空间大于设定的 width 值。
检查 box-sizing 是否为 content-box（默认值）
当元素设置 width: 100%，但同时有 padding: 10px 或 border: 2px solid 时，浏览器按标准盒模型（box-sizing: content-box）渲染：实际宽度 = content 宽度 + padding + border。这会让元素撑出父容器，触发横向滚动。
- 在全局样式中加入：
* { box-sizing: border-box; }，让 padding 和 border 包含在 width 内 - 对关键容器（如 header、main、wrapper）单独设置：
box-sizing: border-box; - 用开发者工具选中溢出元素，在「Computed」面板查看 box-sizing 实际值和最终 width 计算结果
排查父容器未设 width 或 overflow-x
即使子元素正常，父容器若未限制宽度或允许横向溢出，也会导致滚动条出现。
- 确认 body、html 是否有意外的
min-width或width声明 - 检查外层 wrapper 是否缺少
max-width或width: 100%，尤其在使用 flex/grid 布局时 - 临时给 body 加上
overflow-x: hidden;可隐藏滚动条，但只是掩盖问题，需定位真正溢出源
留意伪元素、阴影与绝对定位元素
这些容易被忽略的“隐形宽度贡献者”也可能突破边界：
立即学习“前端免费学习笔记（深入）”；
-
::before / ::after设置了content: "..."且未设width或white-space: nowrap，可能撑宽父级 -
box-shadow本身不占布局空间，但若配合transform或filter（如 blur），可能触发渲染层溢出 - 绝对定位元素（
position: absolute）若 left/right 值过大，或未设overflow: hidden的父容器，会延伸到视口外并拉宽文档
快速定位溢出源的小技巧
不用逐个删代码，用浏览器自带能力高效排查：
- 在开发者工具中右键页面 → 「Inspect Elements」→ 按
Ctrl+Shift+C（Win）或Cmd+Shift+C（Mac）开启元素选择，悬停看哪些区域超出视口右边缘 - 在控制台运行：
document.querySelectorAll('*').forEach(el => { if (el.scrollWidth > el.clientWidth) console.log(el); });找出实际内容溢出的元素 - 临时加全局轮廓：
* { outline: 1px solid red !important; }，一眼识别“越界”的块级元素
