box-sizing有两个取值：content-box（默认）指width/height仅内容区尺寸，padding和border额外增加总宽高；border-box指width/height包含内容、padding和border，三者之和恒等于设定值。
box-sizing 的两个取值分别代表什么
box-sizing 属性控制元素宽高的计算方式，它只有两个合法值：content-box（默认）和 border-box。
content-box 下，你写的 width 和 height 仅指内容区尺寸，padding 和 border 会额外加到盒子总尺寸上；border-box 下，width 和 height 表示整个盒子的最终占用空间，padding 和 border 从这个尺寸里“扣”出来。
换句话说：设 width: 200px; padding: 10px; border: 2px solid;，在 content-box 中盒子总宽是 224px；在 border-box 中就是稳稳的 200px。
为什么推荐全局设置 box-sizing: border-box
绝大多数现代 UI 开发都默认用 border-box，因为它更符合直觉——你指定多宽，它就占多宽。
立即学习“前端免费学习笔记（深入）”；
常见做法是在 CSS 入口处统一重置：
*, *::before, *::after {
box-sizing: border-box;
}注意这行代码要放在所有其他样式之前，否则可能被后续规则覆盖。另外，*::before 和 *::after 必须显式加上，否则伪元素仍按 content-box 计算，容易在使用绝对定位或 flex 布局时出现尺寸偏差。
哪些场景下不能盲目用 border-box
虽然 border-box 是主流，但某些依赖内容区精确尺寸的场景需要谨慎：
- 使用
calc(100% - 20px)动态计算内容宽度时，若父容器已设border-box，子元素再设border-box可能导致嵌套计算混乱 - 第三方 UI 库（如某些老版本 Bootstrap）内部基于
content-box编写，强行全局重置可能破坏其栅格或表单控件的对齐 - 内联元素（如
span）设border-box后，若同时设了padding，可能意外触发行高变化或换行
box-sizing 在 flex / grid 布局中的实际影响
在 display: flex 或 display: grid 容器中，box-sizing 主要影响子项自身的尺寸解析，不影响 flex/grid 的分配逻辑——也就是说，flex: 1 仍按剩余空间分配，但分配后的“结果尺寸”是否包含 padding/border，取决于该项自身的 box-sizing。
典型问题：
- 一个
flex: 1的子项设了padding: 16px，但没设box-sizing: border-box→ 实际内容区变窄，文字可能贴边甚至溢出 - grid item 设
width: 100%+padding，若为content-box，可能撑破网格轨道
所以只要用了 padding/border，哪怕在 flex/grid 里，也建议显式声明 box-sizing: border-box。
真正容易被忽略的是：当你调试一个奇怪的尺寸偏差时，往往不是 margin 或 display 的问题，而是某个祖先元素漏写了 box-sizing，而它的子元素又恰好设置了 padding —— 这种嵌套计算误差很难一眼看出来。
