答案是使用 box-sizing: border-box，因其使 width: 100% 包含 padding 和 border，避免总宽超父容器；全局重置应写为 , ::before, *::after { box-sizing: border-box; }。
因为默认的 content-box 会让 width: 100% 的 input 实际宽超父容器、让两个 width: 50% 的卡片加点 padding 就换行——border-box 直接把 padding 和 border “收进”你写的宽度里，尺寸可控、布局不崩。
为什么 width: 100% 的 input 总是撑破容器？
这是 content-box 的典型副作用：width: 100% 只管内容区，padding: 8px 和 border: 1px 会额外加在两边，实际宽度 = 100% + 16px + 2px。小屏下直接触发横向滚动条，表单被截断。
换成 border-box 后，width: 100% 就是真·占满父容器，padding 和 border 从内容区内部“挤出来”，不往外撑。
- 常见于
input[type="text"]、textarea、select等替换元素 - 旧版 Safari 对
input[type="search"]有渲染异常，需单独覆盖：input[type="search"] { box-sizing: content-box; } -
margin始终在盒子外部，不受box-sizing影响
全局启用 border-box 的正确写法是什么？
只写 * { box-sizing: border-box; } 是错的——它漏掉了伪元素，而 ::before 和 ::after 仍走默认 content-box，可能导致装饰图标尺寸失控或 Tooltip 错位。
必须带上伪元素声明：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 兼容性无压力：
box-sizingIE8+ 全支持 - 性能影响可忽略：纯 CSS 解析时的静态计算方式切换，不触发重排
- 不要在媒体查询里动态切换
box-sizing，会导致布局抖动和动画卡顿
切到 border-box 后页面变小了，怎么调？
这不是 bug，是预期行为：原来 width: 200px 在 content-box 下是“内容区 200px”，加了 padding: 10px 和 border: 1px 后总宽 222px；切过去后，width: 200px 变成“整个盒子外沿 200px”，内容区被压缩到 178px —— 文字挤了、图标偏了、高度塌了。
- 重构老项目时，这是最常遇到的 UI 偏移来源
- 别一边改
box-sizing一边手动调width，推荐先全局切，再针对性微调明显异常的组件（比如卡片、按钮、表单控件） - 调试时看浏览器 DevTools 的 Computed 面板，确认
width值是否已包含padding和border，别只信 Styles 面板里的声明
Flex/Grid 里 box-sizing 还有用吗？
有用，但作用点容易被误判。
在 Flex 容器中，flex: 1 或 width 声明可能被 flex 分配逻辑覆盖，此时 box-sizing 不影响主轴尺寸分配，但决定该子项内部 padding 和 border 占多少“内容空间”——比如文字是否因留白挤压换行。
-
grid-column: span 2的项，box-sizing不改变列宽，但影响格子内内容排布 - 嵌套 Flex 容器混用两种盒模型，子项尺寸逻辑会打架，视觉对不齐
- iframe、canvas 等替换元素不受
*影响，得单独设置
真正麻烦的不是写那一行重置代码，而是老项目里那些没显式声明 box-sizing 却依赖 content-box 计算逻辑的组件——它们会在全局切换后悄悄变形，得靠 Computed 面板一个个核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
