根本原因是默认content-box盒模型使width:100%+padding+border暗中撑爆容器，必须全局重置, ::before, *::after{box-sizing:border-box}，局部设置无效，因子元素仍按content-box计算尺寸。
移动端出现横向滚动条，八成不是内容太宽，而是默认 content-box 盒模型让 width: 100% + padding + border 暗中撑爆了容器。
为什么全局重置 box-sizing: border-box 是必须的
局部设置（比如只给某个 .card 加）根本没用：它的子元素（input、span、伪元素）依然按默认 content-box 算尺寸，一加 padding 就溢出。你得从 HTML 第一个字节开始控制——所有新插入节点、动态生成元素、第三方组件里的子项，都得被兜住。
-
*单独写不够，漏掉::before和::after，它们可能生成大尺寸content导致溢出 - 第三方 UI 库（如
ant-input-wrapper）内部样式可能覆盖你的规则，需检查优先级或用!important隔离 - 某些 SVG 或
<canvas></canvas>不继承该属性，得单独声明
最稳妥的重置写法
别用 * { margin: 0; padding: 0; } ——它会干掉 button 和 input 的原生热区。只动盒模型：
*, *::before, *::after {
box-sizing: border-box;
}
对已知依赖 content-box 的第三方组件，加 wrapper 隔离：
.ant-input-wrapper *, .el-input__inner {
box-sizing: content-box !important;
}
哪些地方容易漏掉 box-sizing
表单控件在 Safari / 旧 Edge 中有特殊渲染逻辑；flex 或 grid 子项即使设了 flex-basis: 200px，若没 border-box，加上 padding 和 border 后实际占位仍是 228px，直接挤垮布局。
-
input[type="search"]出滚动条？单独加padding: 0.375em; border: 1px solid;，并确认没额外line-height拉高 -
Shadow DOM或iframe里样式不继承主页面设置，得单独重置 -
display: table容器内，white-space: nowrap+td的padding是高频溢出点
别在 body 上硬加 overflow-x: hidden
这是掩耳盗铃：overflow-x: hidden 写在 body 或 html 上，会截断弹窗、下拉菜单、tooltip，还影响屏幕阅读器，iOS Safari 中甚至禁用弹性滚动。
真正该加的地方是具体容器，比如轮播列表或卡片流：
.carousel-track {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
复杂点在于：动态插入内容、第三方组件嵌套、以及 transform 或 scale 改变视口后，盒模型计算可能被绕过——这时候光靠重置不够，得配合 max-width: 100% 和 contain: layout 主动隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
