移动端必须用 box-sizing: border-box，否则 width: 50% 的卡片加 padding 会换行、width: 100% 的 input 会撑破容器并触发横向滚动条；小屏幕对像素误差敏感，content-box 下 padding/border 叠加在 width 外导致布局失控。
移动端用 box-sizing: border-box 不是“更好”，而是几乎必须——否则 width: 50% 的两个卡片加个 padding 就换行，input 设了 width: 100% 却撑破父容器，横向滚动条悄无声息地出现。
为什么移动端特别容易被 content-box 坑到？
小屏幕对像素误差极度敏感，而默认的 content-box 让 padding 和 border 叠加在 width 之外：
- 设
width: 100%的输入框，加padding: 12px后总宽 > 100%，触发横向滚动条（尤其 iOS Safari） - 两列栅格写
width: 50%，只要任一列有border: 1px或padding: 8px，第二列必然掉下去 - Flex 子项设
flex: 1，但内部有padding时，主轴空间被“吃掉”，导致内容挤压或换行
全局设置 * { box-sizing: border-box } 的实际效果
一行代码解决绝大多数尺寸失控问题，但要注意三点：
- 必须包含伪元素：
*::before, *::after，否则::before生成的内容可能仍按content-box计算 - IE8+ 完全支持，无需
-webkit-前缀；但若项目还跑 IE7，就得手动给关键元素加，不能靠通配符 - 某些老 UI 库（如 Bootstrap 3）已在内部重置过
box-sizing，全局设置可能被覆盖——用浏览器开发者工具检查 computed styles 中的box-sizing值最准
和移动端常用布局方式的配合要点
border-box 不是万能胶，它只管“宽高怎么算”，不解决 margin、缩放、视口适配等问题：
立即学习“前端免费学习笔记（深入）”；
-
margin永远在盒子外部，border-box对它完全没影响——别指望 padding + margin 一起被“包进去” - 搭配
rem或vw做响应式时，border-box让你直接写width: 90vw; padding: 1rem，不用反复calc(90vw - 2rem) - 用
transform: scale(0.5)缩放整个页面时，border和padding会同比缩小，但可能变模糊——这不是box-sizing的锅，是渲染精度问题
真正省事的不是加了那一行 CSS，而是从第一个 div 开始就按“我设的 width 就是它占的地方”去思考——比如按钮要宽 88px，就写 width: 88px; padding: 8px; border: 1px，别再心算减法。这点在移动端高频交互组件里，一天能少 debug 半小时。
