box-sizing 的取值决定 width/height 指代的范围：content-box 下仅内容区，border-box 下为内容+padding+border总和；padding 和 border 会挤占宽高空间，margin 不参与自身尺寸计算；width/height 对 inline 元素无效，flex/grid 子项受弹性算法影响；calc() 需手动匹配 box-sizing 逻辑，单位混用将失效。
box-sizing 的取值如何影响 width/height 的实际含义
默认情况下 box-sizing 是 content-box，此时给一个元素设置 width: 200px，指的是内容区宽度为 200px，再加上 padding 和 border 才是元素最终占据的总宽度。这在做等宽布局或响应式时极易出错。
更符合直觉的是 box-sizing: border-box：此时 width 表示“内容 + padding + border”的总宽度，height 同理。几乎所有现代项目都会在全局重置：
* {
box-sizing: border-box;
}注意：该规则不继承，但会应用到所有元素（包括伪元素），且 box-sizing 不支持动画。
padding/border/margin 对尺寸计算的实际参与方式
只有 padding 和 border 会挤占 width/height 的空间（取决于 box-sizing），而 margin 永远不参与元素自身的尺寸计算——它只影响外边距和与其他元素的距离。
立即学习“前端免费学习笔记（深入）”；
-
padding：增加内容区到边框内侧的距离，属于“内部扩张” -
border：有宽度、样式、颜色，其宽度计入border-box模式下的width -
margin：不影响自身尺寸，但可能触发外边距合并（margin collapse）
典型陷阱：width: 100% 的子元素若设置了 padding: 10px 且未设 box-sizing: border-box，就会溢出父容器。
width/height 在不同 display 值下的行为差异
width 和 height 并非对所有元素都生效。关键看 display 类型：
-
display: block/inline-block：可设width/height -
display: inline（如<span>）：忽略width/height，仅受内容和line-height影响 -
display: flex/grid容器内的直接子项：width可能被弹性算法覆盖，需配合flex-basis或min-width控制
验证方法：在开发者工具中查看 computed 样式里的 width 值是否为期望数值——若显示 auto 且你写了具体值，大概率是 display 类型不支持或被层叠覆盖。
calc() 与盒模型尺寸联动的常见误用点
calc() 常用于动态抵消 padding/border，比如：width: calc(100% - 20px)。但它不能自动感知 box-sizing，必须手动匹配逻辑：
- 若用
border-box，减去的应是padding+border总和 - 若用
content-box，width: 100%已不含 padding/border，再减就容易过小 - 单位混用要严格：不允许
calc(100% - 1em + 2px)这类无意义表达式（浏览器会拒绝解析）
更稳妥的做法是优先用 box-sizing: border-box + width: 100%，而非靠 calc() 折算，除非涉及复杂响应式断点补偿。
盒模型真正难的不是概念，而是当你在嵌套 flex 容器里调一个 padding，结果发现某个子项突然换行——那往往不是 padding 本身的问题，而是它改变了该元素在 border-box 下的可用 content 宽度，进而影响了 flex 算法的换行判断。
