<p>input 宽度撑破容器是因为默认 content-box 模式下 width:100% 不包含 padding 和 border，导致实际宽度超限；全局启用 border-box 需写 , ::before , *::after { box-sizing: border-box; }，并注意替换元素和例外情况。</p>
为什么 input 宽度总撑破容器？
因为 input 默认是 content-box，你写 width: 100% 只管内容区，padding: 8px 和 border: 1px 会额外加在两边——实际宽 = 100% + 16px + 2px，必然溢出父容器，小屏下直接触发横向滚动条。
- 常见现象：表单填不满、卡片内 input 被截断、移动端左右滑动才能看到提交按钮
- 真实场景：响应式登录框里两个
input并排各占 48%，一加 padding 就换行 - 修复不是给每个
input单独加box-sizing: border-box，而是全局统一
怎么安全地全局启用 border-box？
一行代码就能覆盖绝大多数情况，但漏掉伪元素会埋坑——比如用 ::before 做装饰图标时，它仍走默认 content-box，尺寸就不可控。
- 必须写成：
* , *::before, *::after { box-sizing: border-box; } - 不要只写
*，否则某些 UI 库的弹层、Tooltip 里的伪元素可能错位 - 极少数例外（如旧版 Safari 的
input[type="search"]）可单独覆盖：input[type="search"] { box-sizing: content-box; } - 不影响
margin——它永远在盒子外，和box-sizing无关
Flex/Grid 里 box-sizing 还起作用吗？
起作用，但容易误判。比如设了 flex: 1，你看到的宽度由 flex 分配决定，width 声明被忽略，这时候 box-sizing 不影响主轴尺寸，但会影响内部 padding 和 border 占多少“内容空间”。
- 调试时看浏览器“Computed”面板，确认
width值是否已包含padding和border，别只信 Styles 面板里的声明 - Grid 中
grid-column: span 2的项，box-sizing不改变列宽，但决定该格子内文字是否因 padding 挤压换行 - 嵌套 Flex 容器里混用两种盒模型，子项尺寸逻辑会打架，视觉对不齐
从 content-box 切到 border-box 为什么页面变小了？
因为你原来写的 width: 200px 在 content-box 下是“内容区 200px”，加上 padding: 10px 和 border: 1px 后总宽 222px；切过去后，width: 200px 变成“整个盒子外沿 200px”，内容区被压缩到 178px —— 所以文字挤了、图标偏了、高度塌了。
立即学习“前端免费学习笔记（深入）”；
- 重构老项目时，这是最常遇到的 UI 偏移来源
- 别改
box-sizing同时又手动调width，推荐先全局切，再针对性微调明显异常的组件 - 媒体查询里绝对不要切换
box-sizing，会导致重排抖动，动画卡顿
最容易被忽略的点：iframe、canvas 等替换元素不受 * 影响，得检查它们的包裹容器是否也用了 border-box；还有，box-sizing 不解决 margin 折叠或 flex 最小宽度限制这类问题，它只管“宽高怎么算”。
