在CSS布局开发过程中，准确计算元素实际占用空间是做好页面排版的基础，很多布局异常问题本质都是对元素空间计算规则理解不到位导致的。CSS中元素实际占用空间由盒模型的各个组成部分共同决定，不同的盒模型设置会带来完全不同的计算结果。
CSS盒模型的基本组成
CSS盒模型是计算元素实际占用空间的核心依据，每个元素都可以看作是一个矩形的盒子，这个盒子由四个部分组成，从内到外依次是：
- content：内容区域，用来显示文本、图片等实际内容，大小可以通过width和height属性设置
- padding：内边距，内容区域到边框之间的空白区域，分上下左右四个方向
- border：边框，内边距外部的边界线，同样分上下左右四个方向，有宽度属性
- margin：外边距，边框外部的空白区域，用来分隔相邻元素，分上下左右四个方向
两种盒模型的计算差异
CSS中存在两种盒模型，分别是标准盒模型和IE盒模型，两者的核心差异在于width和height属性作用的区域不同，这也直接导致元素实际占用空间的计算逻辑不同。
标准盒模型
标准盒模型是浏览器的默认盒模型，此时设置的width和height仅作用于content区域，元素的总宽度和总高度需要加上padding、border、margin的尺寸。
标准盒模型下元素总宽度计算公式为：
总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
总高度计算公式为：
总高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
下面通过一个代码示例演示标准盒模型的空间计算：
/* 标准盒模型 浏览器默认 等同于 box-sizing: content-box */
.box {
width: 200px; /* 内容区域宽度 */
height: 100px; /* 内容区域高度 */
padding: 20px; /* 上下左右内边距都是20px */
border: 5px solid #333; /* 上下左右边框宽度都是5px */
margin: 10px; /* 上下左右外边距都是10px */
}
按照标准盒模型计算，这个元素的总宽度为：10px + 5px + 20px + 200px + 20px + 5px + 10px = 270px，总高度为：10px + 5px + 20px + 100px + 20px + 5px + 10px = 170px。
IE盒模型
IE盒模型通过box-sizing: border-box属性开启，此时设置的width和height会包含content、padding、border三个部分的尺寸，元素的总宽度和总高度仅需要额外加上margin的尺寸。
IE盒模型下元素总宽度计算公式为：
总宽度 = margin-left + width + margin-right
总高度计算公式为：
总高度 = margin-top + height + margin-bottom
同样用上面的尺寸参数，开启IE盒模型后计算方式如下：
/* IE盒模型 */
.box {
box-sizing: border-box; /* 开启IE盒模型 */
width: 200px; /* 此时宽度包含content+padding+border */
height: 100px; /* 此时高度包含content+padding+border */
padding: 20px; /* 上下左右内边距都是20px */
border: 5px solid #333; /* 上下左右边框宽度都是5px */
margin: 10px; /* 上下左右外边距都是10px */
}
按照IE盒模型计算，这个元素的内容区域宽度会被压缩为：200px - 20px*2 -5px*2 = 150px，内容区域高度为：100px -20px*2 -5px*2 = 50px。元素总宽度为：10px + 200px +10px = 220px，总高度为：10px +100px +10px = 120px。
特殊场景的空间计算
外边距重叠的情况
当两个垂直相邻的块级元素相遇时，如果它们的margin-top和margin-bottom发生接触，就会出现外边距重叠现象，此时两个元素之间的实际间距不是两个margin之和，而是取较大的那个margin值。
比如下面两个元素：
.top {
margin-bottom: 30px;
height: 50px;
}
.bottom {
margin-top: 20px;
height: 50px;
}
这两个元素之间的实际间距是30px，而不是50px，计算两个元素的总占用空间时，中间重叠的margin只能算一次。
行内元素的空间计算
行内元素的width和height属性是无效的，行内元素的content区域大小由自身内容决定，padding和border会生效，但是垂直方向的margin不会生效。行内元素的总宽度是内容宽度加上左右padding、左右border、左右margin，总高度由line-height决定，和padding、border、margin的垂直方向值无关。
计算规则总结
计算CSS元素实际占用空间时可以遵循以下步骤：
- 先确认元素使用的是标准盒模型还是IE盒模型，查看是否有
box-sizing属性设置 - 如果是标准盒模型，先算content+padding+border的总和，再加上margin得到总尺寸
- 如果是IE盒模型，width和height已经包含padding和border，直接加上margin得到总尺寸
- 检查是否存在外边距重叠等特殊情况，调整相邻元素的间距计算
掌握这些规则后，就可以准确计算任意CSS元素的实际占用空间，避免布局时出现尺寸不符合预期的问题。