一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情
前言
CSS 中的盒模型可以分为两种：标准盒模型、IE盒模型，这两种盒模型都是由content（内容区） + padding（填充区） + border（边框区） + margin（外边距）构成，其大小都是由content + padding + border决定的，但是盒子内容的宽/高度（即 width / height）的计算范围根据盒模型的不同会有所不同。这篇文章就来给大家讲讲这两者的区别。
标准盒模型
在标准盒模型中，如果你给元素设置了宽（width）和高（height），实际是设置了 content，整个盒子的大小是由 padding 和 border ，再加上设置的宽高一起决定的。
也就是说，标准盒模型 宽高 = width / height + padding + border。
下面所示的代码中，我定义了一个 class 为 box 的 div 盒子，并且设置了 宽高、内外边距、边框和背景颜色。
// HTML
<div class="box"></div>
// CSS
.box {
width: 500px;
height: 300px;
border: 10px solid #ccc;
background-color: bisque;
padding: 20px;
margin: 20px;
}
如果采用 标准盒模型 来计算宽高度
该盒子在网页中占用的大小为：
宽：width = width + padding * 2 + border * 2 + margin * 2 = 500 + 20 * 2 + 10 * 2 + 20 * 2 = 600px（其中的 padding * 2 指的是 padding-left、padding-right；border * 2 指的是 border-left、border-right；margin * 2 指的是 margin-left、margin-right）。
高：height = height + padding * 2 + border * 2 + margin * 2 = 300 + 20 * 2 + 10 * 2 + 20 * 2 = 400px（其中的 padding * 2 指的是 padding-top、padding-bottom；border * 2 指的是 border-top、border-bottom；margin * 2 指的是 margin-top、margin-bottom）。
该盒子的真实大小为：
宽：width = width + padding * 2 + border * 2 = 500 + 20 * 2 + 10 * 2 = 560px（其中的 padding * 2 指的是 padding-left、padding-right；border * 2 指的是 border-left、border-right）。
高：height = height + padding * 2 + border * 2 = 300 + 20 * 2 + 10 * 2 = 360px（其中的 padding * 2 指的是 padding-top、padding-bottom；border * 2 指的是 border-top、border-bottom）。
IE盒模型
和标准盒模型不同的是，在 IE 盒模型中，content 的部分包含了 padding 和 border，盒子实际的宽高就是自己设置的宽高，无须再进行计算。
也就是说，IE盒模型 宽高 = width / height。
下面所示的代码中，我定义了一个 class 为 box 的 div 盒子，并且设置了 宽高、内外边距、边框和背景颜色。
// HTML
<div class="box"></div>
// CSS
.box {
width: 500px;
height: 300px;
border: 10px solid #ccc;
background-color: bisque;
padding: 20px;
margin: 20px;
}
如果采用 IE盒模型 来计算宽高度
该盒子在网页中占用的大小为：
宽：width = width + margin * 2 = 500 + 20 * 2 = 540px（其中的 margin * 2 指的是 margin-left、margin-right）。
高：height = height + margin * 2 = 300 + 20 * 2 = 340px（其中的 margin * 2 指的是 margin-top、margin-bottom）。
该盒子的真实大小为：
宽：width = 500px
高：height = 300px
元素的盒模型如何改变
可以通过 CSS 属性 box-sizing 改变元素的盒模型。
- 标准盒模型：
box-sizing：content-box。 - IE盒模型：
box-sizing：border-box。
