CSS盒模型中area区域与box盒子的概念区别及相关问题答疑

二者是完全不同维度的几何定义，绝非同一概念：

• box 是由四条明确边界围合出的完整闭合矩形，是嵌套包含的层级关系：最外层为margin box，向内依次嵌套border box、padding box，最内层为content box，所有内层box完全处于外层box的范围之内。你可以把box理解为“用四条边线圈定的整块属地范围”。
• area 是两层相邻box的边界夹出来的层状/环形区域，是“两个圈之间的夹层部分”，除了最内层的content area，其余area都不是完整矩形。四类area的对应范围分别是：
  • margin area：margin box外边界与border box外边界之间的夹层
  • border area：border box外边界与padding box外边界之间的夹层
  • padding area：padding box外边界与content box外边界之间的夹层
  • content area：content box边界围合的完整矩形，是唯一和对应box范围完全重合的area

针对你举的具体例子，结论非常明确：

1. 你描述的“处于margin box和padding box之间、厚度由border-width属性决定的区域”不是border box，而是**border area**。border box是从border外边缘圈定的整块矩形，范围已经覆盖了内部的border层、padding层、content层全部内容。
2. box-sizing: border-box的计算基准确实是border box：设置该值后，你给元素定义的width、height属性，对应的就是border box的总宽高；浏览器会自动从这个总尺寸里扣除border-width、padding占用的尺寸，剩余空间才分配给content区域。

margin box的尺寸并非只由margin属性决定：
它的单方向总尺寸 = 对应方向border box的尺寸 + 两侧（或上下）margin的实际计算值。比如一个元素border box宽度为100px，左右margin计算值各为10px，那么它的margin box总宽度就是120px。
需要注意两个特殊规则：

• margin支持负值，负margin会让margin box的对应方向尺寸小于内部的border box
• 上下margin发生折叠时，折叠后的实际margin占位才会计入margin box的高度计算，不是简单将上下margin值直接相加

内容的提问来源于stack exchange，提问作者Cristiano Moraes