应全局重置 box-sizing 为 border-box 并包含伪元素，同时为替换元素设 max-width: 100%，避免因 content-box 计算导致的横向溢出。
直接改 box-sizing，别只靠 overflow-x: hidden 掩盖问题——它不修复溢出源，只藏起来，JS 动态插入内容或缩放变化时还会复现。
为什么 padding 一加就出横向滚动条
根本不是“多几个像素”那么简单：box-sizing 默认是 content-box，意味着 width: 100% 只管内容区，padding 和 border 是额外叠加的。浏览器按真实占用宽度计算，一旦超视口，滚动条立刻出现。
- 父容器设了
padding: 20px，子元素又写width: 100%→ 实际宽 = 视口宽 + 40px - 三列卡片用
width: 33.333%+border: 1px→ 每列多出 2px，三列共 +6px -
*::before和*::after伪元素也受默认content-box影响，常被忽略
必须全局重置 box-sizing
只写 * { box-sizing: border-box; } 不够，漏掉伪元素照样出问题。正确写法是：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 检查开发者工具的 Computed 面板，确认关键容器（尤其是
body、布局容器、卡片）的box-sizing真为border-box - 不要在
html或body上单独加overflow-x: hidden作为兜底——它会干扰 JS 动画、第三方弹窗定位等 - 如果项目已用 CSS 重置库（如 Normalize.css），确认它没覆盖或遗漏伪元素重置
图片、iframe 等替换元素仍会撑宽
即使 box-sizing 改对了，<img>、<iframe></iframe>、<svg></svg> 这类替换元素默认不响应父容器宽度，原始尺寸照常渲染，直接突破边界。
- 统一加
img, iframe, svg { max-width: 100%; height: auto; } - 若需保持宽高比，用
aspect-ratio（现代浏览器）或padding-top技巧替代固定height - 避免对它们单独设
width: 100%—— 和max-width: 100%冲突，反而可能触发双倍计算
绝对定位元素 + padding 的组合最危险
position: absolute 元素若放在带 padding 的父容器里，又用了 left: 0; right: 0，浏览器会用“父容器 clientWidth − left − right”反推宽度。而父容器的 clientWidth 已扣除了 padding，但某些浏览器（尤其是 Safari）在 DPR=2 或缩放场景下，会把滚动条宽度或小数像素算错，导致反推结果 > 视口宽。
- 验证方式：控制台运行
document.body.scrollWidth - window.innerWidth，结果 > 1 就基本锁定是这类元素干扰 - 稳妥写法是显式控制宽度：
left: 0; width: 100%;，而不是依赖left/right对推算 - 若必须用
left: 0; right: 0，确保父容器已设box-sizing: border-box且无额外padding干扰
真正难搞的不是静态样式，而是那些 JS 动态注入后才出现的 padding 相关溢出——比如第三方组件的弹窗、Tooltip，它们可能在 body 下直接 append 一个带 padding 的绝对定位 div，你全局重置了也拦不住。这种得靠 DevTools 筛选 [style*="padding"] 手动揪出来改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
