CSS盒子模型是前端布局的核心概念，每个HTML元素都会被浏览器解析为一个矩形的盒子，盒子的整体尺寸由内容区、内边距、边框共同决定，外边距仅影响盒子与其他元素之间的间距，不参与盒子自身尺寸的计算。要掌握盒子模型尺寸的计算，首先需要明确两种常见的盒子模型类型以及对应的计算规则。
两种盒子模型类型
标准盒子模型
标准盒子模型是浏览器默认的盒子模型类型，也就是我们在没有设置box-sizing属性时，元素默认采用的模型。在这种模型下，我们给元素设置的width和height属性，仅代表内容区的宽度和高度，盒子的总宽度和总高度需要额外加上内边距和边框的数值。
IE盒子模型（怪异盒子模型）
IE盒子模型又被称为怪异盒子模型，当给元素设置box-sizing: border-box属性时，元素就会采用这种模型。在这种模型下，我们设置的width和height属性，代表的是内容区、内边距、边框三者的总宽度和总高度，浏览器会自动调整内容区的大小，来保证总尺寸和我们设置的数值一致。
不同模型的尺寸计算公式
标准盒子模型尺寸计算
标准盒子模型的总尺寸计算公式如下：
- 盒子总宽度 = 设置的width + 左右padding + 左右border
- 盒子总高度 = 设置的height + 上下padding + 上下border
比如我们给一个div元素设置如下样式：
/* 标准盒子模型，默认box-sizing为content-box */
div {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
}
按照公式计算，这个div的总宽度为 200 + 20*2 + 5*2 = 250px，总高度为 100 + 20*2 + 5*2 = 150px。内容区的宽度和高度就是我们设置的200px和100px，内边距和边框会向外扩展，增加盒子的整体尺寸。
IE盒子模型尺寸计算
IE盒子模型的总尺寸计算公式如下：
- 盒子总宽度 = 设置的width（已经是内容区+padding+border的总和）
- 盒子总高度 = 设置的height（已经是内容区+padding+border的总和）
内容区的宽度和高度会自动计算，公式为：
- 内容区宽度 = 设置的width - 左右padding - 左右border
- 内容区高度 = 设置的height - 上下padding - 上下border
同样给div设置如下样式：
/* IE盒子模型 */
div {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
}
此时盒子的总宽度就是设置的200px，总高度就是设置的100px。内容区的宽度为 200 - 20*2 -5*2 = 150px，内容区高度为 100 -20*2 -5*2 = 50px，内边距和边框会向内挤压内容区的空间，不会让盒子整体尺寸超出我们设置的数值。
外边距对尺寸的影响
外边距margin不会影响盒子自身的尺寸，它只会影响盒子与外部元素之间的间距。比如两个相邻的块级元素，上一个元素设置margin-bottom: 20px，下一个元素设置margin-top: 30px，两个元素之间的实际间距会按照外边距合并的规则计算，而不是两个数值相加，这部分也不会算入盒子自身的尺寸中。
实际开发中的选择建议
在实际的前端开发中，更推荐使用IE盒子模型，也就是给所有元素统一设置box-sizing: border-box，这样可以避免我们调整内边距或者边框时，导致元素整体尺寸超出预期，破坏已有的布局结构。可以通过如下全局样式统一设置：
/* 全局设置IE盒子模型 */
*,
*::before,
*::after {
box-sizing: border-box;
}
如果不需要统一设置，也可以根据具体的布局需求，单独给某个元素设置对应的box-sizing属性，只要清楚两种模型的尺寸计算规则，就可以灵活控制元素的布局效果。