浏览器默认按box-sizing: content-box计算，width: 100%仅指内容区宽度，总宽=父content宽+自身左右padding+左右border；例如父宽375px、子padding: 16px时，实际占宽为375px+32px=407px，导致溢出。
width: 100% 和 padding 同时存在时，浏览器怎么算总宽度
默认 box-sizing 是 content-box，这意味着 width: 100% 只管内容区（content），padding 和 border 是额外加在它外面的。比如父容器宽 375px（iPhone SE），子元素设了 width: 100% + padding: 16px，实际占宽就是 375px + 32px = 407px —— 超出视口，必然触发横向滚动条。
这个计算过程不报错、不警告，DevTools 里 Computed 面板显示 width: 375px 看似正常，但 scrollWidth 是 407px，差值就是溢出量。
为什么给父容器加 padding 就容易翻车
很多人以为“父容器有 padding，子元素 width: 100% 应该自动适应”，其实不是：子元素的 100% 是参照父容器的 content box 宽度，不包含 padding。所以父容器 padding: 16px → content 宽少 32px → 子元素 width: 100% 拿到的是这个缩水后的值，再叠加上自己的 padding，就彻底失控。
- 临时调试时，给父容器加
outline: 1px solid red，一眼看出子项是否“凸出来” - 若父容器必须留白，别用
padding，改用margin（不影响子元素 width 计算） - 或嵌套一层内层容器，把
padding搬到内层，外层只负责尺寸约束
textarea、input、uniapp 的 view 为什么特别容易中招
这些元素默认都是 box-sizing: content-box，且常被直接写成 width: 100% + padding，移动端一放大字体或 viewport 缩放，溢出更明显。
必须显式重置：
textarea, input, .uni-view {
box-sizing: border-box;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
注意：CSS 框架（如 Bootstrap、uView）可能已重置过 box-sizing，要用 DevTools 查 Computed 值确认是否生效。
全局加 * { box-sizing: border-box } 还不够
* { box-sizing: border-box } 能覆盖绝大多数元素，但它对伪元素（::before/::after）默认无效，而有些 UI 库或自定义样式会依赖伪元素撑开宽度；另外，它不解决父容器自身 padding 导致子元素计算失准的问题。
真正要稳住的点是：
- 所有带
width: 100%的元素，自己必须有box-sizing: border-box - 父容器若设了
padding，子元素就别再靠width: 100%去“填满”，改用flex或grid布局控制伸缩 - 移动端调试优先看
scrollWidth > clientWidth的元素，而不是只盯overflow-x样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
