根本原因是默认box-sizing: content-box，width: 100%仅指内容区宽度，padding和border会额外叠加导致总宽超父容器；解决方法是设box-sizing: border-box或全局重置*{box-sizing:border-box}。
为什么width: 100%会溢出父容器
根本原因是默认的 box-sizing: content-box：此时 width: 100% 只管内容区宽度，padding 和 border 会额外加在内容区外面。比如父容器宽 300px，子元素设了 width: 100% + padding: 12px，实际总宽就是 300px + 24px = 324px，必然撑破。
这不是浏览器 bug，是 CSS 盒模型的原始设计逻辑。现代布局中它反而成了主要干扰源。
怎么用border-box真正解决问题
给子元素加 box-sizing: border-box，让 width: 100% 包含 padding 和 border 在内——这才是你直觉里“占满”的意思。
- 单个修复：
.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 注入顺序错乱，首屏闪动，重置样式得提至
最顶部 - 某些框架（如 Bootstrap）自己重写了
box-sizing，但没包含伪元素，导致部分组件仍溢出
盒模型这事，改完不验证等于没改。尤其在混合了 rem/vw 和固定像素 padding 的响应式项目里，小屏下溢出往往更隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
