width: 100% 撑破父容器是因为默认 box-sizing: content-box，使 padding 和 border 额外增加宽度；修复方法是设置 box-sizing: border-box，推荐全局重置 , ::before , *::after { box-sizing: border-box; }。
width: 100% 为什么撑破父容器
因为默认的 box-sizing 是 content-box，此时 width: 100% 只控制内容区宽度，padding 和 border 会额外加在内容区外面，导致总宽度超过父容器。
怎么立刻修复溢出问题
给元素加上 box-sizing: border-box，这样 width: 100% 就包含 padding 和 border，不会再溢出。
- 全局推荐写法：
*, *::before, *::after { box-sizing: border-box; } - 只针对某个元素：
.input-field { width: 100%; padding: 12px; box-sizing: border-box; } - 不加
box-sizing的等效写法（不推荐）：width: calc(100% - 24px)（假设左右 padding 各 12px），但响应式下难维护
flex 或 grid 容器里还用管这个吗
仍然要管。虽然 flex item 默认不会因 padding 溢出（flex 会自动收缩），但一旦设了 min-width: auto 或显式 width: 100%，且父容器没设 overflow: hidden，padding 仍可能造成横向滚动条或布局错位。
- 常见翻车场景：
input放在display: flex的表单行里，又加了padding和width: 100% - 稳妥做法：所有表单控件、卡片、面板类元素统一加
box-sizing: border-box - 检查工具：浏览器开发者工具里看元素「Computed」面板，确认
box-sizing确实是border-box，不是被其他样式覆盖了
老项目不敢全局改 box-sizing 怎么办
可以只对已知出问题的组件加，比如 .form-group input、.card .content 这类明确需要 100% 宽 + padding 的地方。
立即学习“前端免费学习笔记（深入）”；
- 优先级注意：如果已有
box-sizing: content-box的样式（比如某些 UI 库重置），必须用更高优先级覆盖，例如加!important或更具体的选择器 - IE8 及以下不支持
box-sizing，但这类浏览器现在基本不用考虑；若真有兼容需求，只能用calc()手动减去 padding 值 - 最隐蔽的坑：伪元素
::before/::after如果也设置了width: 100%和padding，同样要加box-sizing: border-box
