移动端溢出需同时满足四条件：box-sizing: border-box（含伪元素）、width: 100%、min-width: 0（flex子项必备）、max-width: 100%，缺一不可且顺序固定，仅设border-box不足以解决。
直接加 box-sizing: border-box 不够，移动端溢出往往不是单一原因，而是盒模型、flex约束、viewport缺失三者叠加的结果。
为什么 width: 100% + padding 在手机上必溢出？
浏览器默认用 box-sizing: content-box，width: 100% 只管内容区，左右 padding 是额外加在它外面的。比如父容器 content 宽 375px（iPhone SE），子元素设 padding: 0 16px，实际总宽就是 375px + 32px = 407px —— 超出视口，触发横向滚动条。
更隐蔽的是：父容器自己有 padding: 0 20px，它的 content 区只剩 335px；子元素 width: 100% 就只占这 335px，再叠上自身 padding，又超了。
- input、textarea 等表单元素自带浏览器默认
padding和border，不显式重置的话，width: 100%几乎必溢出 - td、th 默认无视
box-sizing，必须显式声明才生效 - 绝对定位元素的
width: 100%是按父元素的 padding box 计算的（含父padding），不是 content box，尺寸判断容易误判
移动端必须写的最小生效组合
光写 box-sizing: border-box 不等于解决。以下四条缺一不可，且顺序不能乱：
-
box-sizing: border-box—— 必须作用于目标元素本身，且要覆盖::before和::after（全局推荐：* , *::before, *::after { box-sizing: border-box; }） -
width: 100%—— 但若父级是display: flex，必须额外加min-width: 0，否则 flex item 拒绝收缩，width: 100%失效 -
max-width: 100%—— 防止大屏下拉伸变形，尤其对文字类容器 -
overflow: hidden—— 配合padding-bottom做响应式容器时，防止伪内容撑开高度
表单控件（input/textarea）的特殊处理
它们自带 UA 样式，padding 和 border 无法靠继承清除，必须显式重置：
- 先统一重置：
input, textarea { margin: 0; border: none; padding: 12px; } - 再强制盒模型：
input, textarea { box-sizing: border-box; } - 如果仍溢出，检查是否被包在
flex容器里 —— 加min-width: 0到该表单元素上 - 极端兼容场景（如老 Android WebView）可退回到
width: calc(100% - 24px)，但需注意减号前后必须有空格
验证是否真生效，别信代码，信 Computed 面板
写了 box-sizing: border-box 不等于起作用。必须进浏览器开发者工具，切到「Computed」面板，直接查目标元素的 box-sizing 值——这是唯一可信依据。
常见失效原因：
- 其他样式规则优先级更高，覆盖了你的设置
- CSS-in-JS 库（如 styled-components）SSR 注入顺序错乱，首屏闪动
- 框架（如 Bootstrap）自己重写了
box-sizing，但没包含::before/::after，导致伪元素仍按content-box算
就算 box-sizing 生效了，溢出还可能来自 margin、absolute 定位偏移、或父容器的 padding —— 这些都不受 border-box 影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
