总宽度 = width + 左右padding + 左右border-width + 左右margin（box-sizing: content-box）；若为border-box，则总宽度 = width + 左右margin。
直接结论：总宽度 = width + 左右padding + 左右border-width + 左右margin，但前提是box-sizing: content-box（浏览器默认）；若设为box-sizing: border-box，则width已包含padding和border，总宽度 = width + 左右margin。
为什么你写的width: 300px实际占了324px？
因为浏览器默认用box-sizing: content-box，此时width仅代表内容区，不包含padding和border。比如：
width: 300px-
padding: 10px→ 左右共+20px -
border: 2px solid→ 左右共+4px - 合计：300 + 20 + 4 = 324px（还没算
margin）
这个结果不是 bug，是盒模型原始定义。开发者工具里“Computed”面板显示的border-box width值，就是最终占用宽度，应以此为准，而非你写的width值。
box-sizing: border-box怎么写才真正生效？
它不继承，只作用于声明它的元素本身。常见失效场景是只加在父容器上，或漏掉伪元素：
立即学习“前端免费学习笔记（深入）”；
- 必须覆盖所有可能产生尺寸偏差的元素：
* { box-sizing: border-box; } - 更稳妥写法（含伪元素）：
*, *::before, *::after { box-sizing: border-box; } - 表单控件如
input、textarea默认仍是content-box，需显式重置
否则哪怕父容器设了border-box，子元素仍按content-box计算，溢出照旧。
嵌套容器中如何逐层算准总宽？
从最内层开始，每层都按自身box-sizing规则叠加。关键点：
- 若某层是
content-box，它的width不包含自己的padding/border，但会影响外层的“内容区宽度” - 若某层是
border-box，它的width就是该层盒子的总宽（不含margin），直接作为外层的内容区基准 -
margin永远额外加在最外层，且不被box-sizing影响；两个相邻margin还可能合并（如垂直方向）
例如三层嵌套，最内层width: 100px; box-sizing: border-box; padding: 5px; → 实际内容区只有90px宽；中间层若width: auto，就会按这90px + 自身padding/border再算。
最容易被忽略的是：就算全用了border-box，margin和HTML源码换行产生的空白（inline-level元素间约4px）仍会悄悄加宽。别只盯着width，要盯死开发者工具里的border-box width数值。
