<p>推荐使用 border-box 是因它让 width/height 直接代表总尺寸，避免 content-box 下 width: 100% + padding + border 导致溢出；全局设 * { box-sizing: border-box; } 可一劳永逸。</p>
box-sizing 不是盒模型本身，而是控制尺寸怎么算的开关。默认 content-box 模式下，你写的 width: 200px 只管内容区，padding 和 border 是额外加在它外面的——结果实际宽度变成 200 + 左右 padding + 左右 border，稍不注意就撑破容器。
为什么 width: 100% 的 div 总是溢出父容器
根本原因不是写错了百分比，而是浏览器默认用 content-box：父容器设了 padding: 16px 或 border: 1px，子元素 width: 100% 仍只填满“内容区”，但总宽 = 100% + padding + border → 必然溢出。
常见于卡片、表单区域、响应式栅格内部嵌套。
解决办法不是手动 calc(100% - 32px)，而是统一切换计算逻辑：
-
* { box-sizing: border-box; }全局生效（必须放在所有样式之前） - 对表单控件单独加固：
input, textarea, select, button { box-sizing: border-box; } - 旧版浏览器需补前缀：
-webkit-box-sizing、-moz-box-sizing、-ms-box-sizing
border-box 模式下 padding 和 border 不再“偷空间”
启用 border-box 后，width 和 height 指的是最外层盒子的总尺寸。内容区自动收缩腾位置，padding 和 border 不再导致尺寸膨胀。
例如：
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
div {
width: 200px;
padding: 12px;
border: 2px solid #333;
box-sizing: border-box;
}此时该 div 占用的水平空间严格等于 200px，内容区只剩 200 - 12×2 - 2×2 = 172px 宽。改 padding 不会影响布局流，这对组件复用和断点切换非常关键。
哪些地方最容易漏掉 box-sizing 设置
不是所有元素都“听话”。以下几类常被忽略，且各浏览器默认行为不一致：
-
input和textarea：Chrome 默认有padding，Firefox 更“紧”，Safari 对box-sizing的继承逻辑曾有 bug -
button：自带border和padding，且部分旧版 IE 下box-sizing不生效 - 自定义组件封装时：如果父组件用了
border-box，但子组件样式未重置，内部padding仍会叠加 - 第三方 UI 库（如 Bootstrap 4+）已内置
border-box，但若你项目里混用了老版本或手写样式，冲突就会暴露
margin 始终不参与 box-sizing 计算
这是最容易误解的一点：box-sizing 只影响 width/height 如何包含 padding 和 border，margin 永远是“盒子外面”的距离，不会被锁进 width 里，也不会因 border-box 改变行为。
所以 margin 合并、塌陷问题依然存在，不能靠 box-sizing 解决。
要处理父子塌陷，还是得用 overflow: hidden、padding 替代或触发 BFC。
真正麻烦的从来不是记住 border-box 这个词，而是当多个嵌套层级、不同来源的样式同时作用时，某个没被重置的 input 或一段漏掉前缀的老代码，会让整个栅格错一像素——而这种错位，在高缩放比屏幕或 flex wrap 场景下才突然显现。
