根本原因是默认box-sizing: content-box，width: 100%仅指内容区宽度，padding和border会额外叠加导致溢出；解决方案是使用box-sizing: border-box，推荐全局设置, ::before, *::after { box-sizing: border-box; }。
为什么width: 100% + padding会撑破父容器
不是写错了，是浏览器默认用box-sizing: content-box——此时width: 100%只管内容区宽度，padding和border会额外加在它外面。比如父容器宽300px、子元素设了width: 100% + padding: 12px，实际总宽就是300px + 24px = 324px，必然溢出。
怎么让width: 100%真正“占满”父容器
加box-sizing: border-box，让width包含padding和border在内，内容区自动收缩。这是最直接、兼容性最好（IE8+）的解法。
- 单个修复：
.input-field { width: 100%; padding: 12px; box-sizing: border-box; } - 全局重置（推荐）：
* { box-sizing: border-box; }不够，必须写成* , *::before, *::after { box-sizing: border-box; }，否则伪元素可能漏掉 - 老项目不敢动全局？优先加在高频出问题的地方：
input、textarea、select、.card-content、.form-group > *
border-box生效了但还是溢出？检查这几个点
box-sizing: border-box对margin完全无效——它只管content/padding/border的尺寸归属。所以如果溢出是因为margin: 20px，加了border-box也没用。
-
margin导致的溢出：优先把padding移到父元素上，或改用flex的gap，或用calc(100% - 40px)手动扣减 - 绝对定位元素（
position: absolute）的width: 100%是按父元素的padding box计算的，不是content box，这点容易误判尺寸 -
table和td默认无视box-sizing，必须显式声明才生效 - 微信X5内核（v3.7以下）对
*::before、*::after的重置支持不稳定，可兜底加一句html { box-sizing: border-box; }
改完不验证等于没改
别只信代码写了，要进浏览器开发者工具看「Computed」面板，确认目标元素的box-sizing值确实是border-box。常见失效原因：
立即学习“前端免费学习笔记（深入）”；
- 其他样式规则优先级更高，覆盖了你的
box-sizing - CSS-in-JS库（如
styled-components）SSR注入顺序错乱，首屏闪动，重置样式得提至<head>最顶部 - 某些框架（如Bootstrap）自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出
尤其在混合了rem/vw和固定像素padding的响应式项目里，小屏下溢出往往更隐蔽。
