box-sizing: border-box 的计算逻辑是：设置的 width/height 包含内容区、padding 和 border，总宽 = width + margin，padding 和 border 从设定尺寸内挤压内容区，确保元素最终占用空间严格等于声明值。
box-sizing: border-box 的计算逻辑是什么
因为 box-sizing: border-box 明确改变了 CSS 盒模型的尺寸定义方式：它让元素的 width 和 height 指代的是「内容区 + 内边距 + 边框」三者总和的最终尺寸，而不是仅内容区大小。这是 W3C 标准中定义的行为，并非浏览器“自动包含”，而是强制重定义了 width 的语义。
为什么用 border-box 而不是 content-box
实际布局中，你更常关心“这个容器最终占多少像素宽”，而不是“内容区该多宽才能凑出 300px 总宽”。比如：width: 300px; padding: 10px; border: 2px solid #000; 在 content-box 下，实际占用宽度是 324px（300 + 2×10 + 2×2），容易导致父容器溢出或响应式错位；而 border-box 下就是稳稳的 300px，内边距和边框从这 300px 里“扣”出来。
哪些地方容易踩坑
- 全局重置时漏掉
input、textarea、button等表单元素——它们在部分浏览器（如旧版 Safari）默认是content-box，不显式设border-box会导致尺寸不一致 - 使用第三方 UI 库（如 Ant Design、Element Plus）前未确认其是否已重置盒模型——若库内部基于
border-box编写，而你的项目全局没设，就可能破坏栅格或间距 - 嵌套设置
padding或border后发现高度“莫名变小”——其实是height被压缩了，内容区被挤缩，需检查是否意外触发了overflow: hidden或字体撑不开行高
如何安全地启用 border-box
推荐在 CSS 入口处统一处理，而非逐个元素加：
立即学习“前端免费学习笔记（深入）”；
*,
*::before,
*::after {
box-sizing: border-box;
}注意两点：
— *::before 和 *::after 必须包含，否则伪元素若设置了 width + padding，仍按 content-box 计算
— 不要对 html 或 body 单独再设，会被上面通配覆盖，但也不影响
真正麻烦的从来不是理解 border-box，而是它生效后，原来靠“猜内容区宽度”写的 hack 布局全失效了——比如手动减去 padding 的 calc(100% - 20px)，这时候得回头改逻辑，而不是改样式。
