应使用 box-sizing: border-box；浏览器默认 content-box 使 width 不含 padding 和 border，导致元素撑出容器，需全局重置并检查伪元素、第三方库及替换元素约束。
box-sizing 还是 content-box？先看 computed 值
width: 100% 本身没错，但浏览器默认用 box-sizing: content-box 计算尺寸——此时 width 只管内容区，padding 和 border 会额外加在外部。比如父容器内容宽 375px，子元素设了 width: 100% + padding: 20px，实际总宽就是 415px，直接撑出横向滚动条。
快速确认方法：DevTools → Elements → 选中元素 → Computed → box-sizing。如果是 content-box，且该元素有 padding 或 border，基本就是它。
修复不是只写 * { box-sizing: border-box; } 就完事，必须检查：
- *::before 和 *::after 是否也被覆盖（伪元素同样会撑宽）
- 第三方 UI 库的 CSS 是否覆盖了你的重置规则
- 某些组件内联 style 可能硬编码了 box-sizing: content-box
图片、iframe、SVG 这些“不听话”的元素漏约束了吗？
它们是替换元素，默认不响应父容器宽度。哪怕父容器 width: 100% 且 box-sizing: border-box，它们仍按原始尺寸渲染，直接突破边界。
必须逐个加约束：
- img：统一加 max-width: 100%; height: auto;
- iframe：除了 width: 100%，确保其父容器有明确宽度（不能是 fit-content 或未设 width 的 flex 项）
- svg：同 img，加 max-width: 100%；若内联，还需设 height: auto 防止比例错乱
临时调试：给 body 加 outline: 1px solid red，再 hover 页面，哪个元素轮廓凸出视口边缘，就是它。
用了 100vw 吗？它和滚动条宽度死磕上了
100vw 是按浏览器窗口“总宽度”算的，包含垂直滚动条（Windows 约 17px，macOS 隐藏时也参与计算）；而用户真正能看见的内容区宽度是 document.documentElement.clientWidth，已自动扣除滚动条。所以当页面有纵向滚动时：100vw > clientWidth → 元素右边缘超出可视区域 → 触发横向滚动。
常见踩坑点：
- Tailwind 的 w-screen（等价于 width: 100vw）套在根容器上
- 轮播容器写成 .slideDiv { width: 100vw; }
- 弹窗遮罩层设 width: 100vw; left: 0;，但没处理 right 或 transform 偏移
- Safari 下 right 和 transform 混用，会把滚动条宽度错误计入包含块宽度
优先改用 width: 100%；非要用视口单位，写成 width: calc(100vw - var(--scrollbar-width, 0px))，并用 JS 注入变量：document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.body.clientWidth) + 'px')
body 默认 margin 和浮动父容器还在偷偷加宽
body 默认有 margin（通常是 8px），没清掉的话，整个页面就先多了 16px 总宽。浮动元素本身不“宽”，但会让父容器算不准宽度——尤其当父容器用了 padding + 子项 width: 100%，或者 HTML 换行空格被渲染成 4–8px 间隙，几个浮动项一排就超宽。
解决方式：
- 清除 body 默认边距：body { margin: 0; }
- 浮动父容器别用 overflow: hidden（会裁剪 position: absolute 内容），改用 display: flow-root 创建 BFC
- 检查浮动子项是否用了 width: 100%，建议改用 calc() 配合 margin 控制间距
- 绝对定位元素的 left/right 值别用固定像素（如 right: -20px），优先用 transform: translateX() 避免盒模型干扰
最麻烦的不是写错，而是某些 UI 库内部用 JS 动态写 right 偏移或 100vw 宽度，你改了 CSS 也可能被覆盖。得去 DevTools 的 Styles 面板看 computed 值，再顺藤摸瓜找 JS 注入点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
