盒模型：由外到内的公式表示：box = margin + border + padding + content。content不是属性，为内容，以文本或节点存在占用位置。
理解-快递包裹：两个快递包裹间的距离就是margin，快递包裹的纸皮就是border，打开快递包裹，填充物料就是padding，
把填充物料打开看到了你的物品，那就是content。这样理解是不是特别容易呢？
类型：标准盒模型和怪异盒模型，声明：box-sizing，不具有继承性。
标准盒模型：content-box
标准盒模型是W3C规范的标准，由margin + border + padding + content组成。与上述提到的公式一模一样，节点的width/height只包含content，不包含padding和border。
节点的尺寸计算公式如下。
- 横向：
margin-[left/right]+border-[left/right]+padding-[left/right]+width - 纵向：
margin-[top/bottom]+border-[top/bottom]+padding-[top/bottom]+height
节点的宽高计算公式如下。
- 横向：
width = width - 纵向：
height = height
怪异盒模型：borde-box
怪异盒模型又名IE盒子模型，是IExplore制定的标准，由margin + content组成。与上述提到的公式一不同，节点的width/height包含border、padding和content。
节点的尺寸计算公式如下。
- 横向：
margin-[left/right]+width(包含border-[left/right]和padding-[left/right]) - 纵向：
margin-[top/bottom]+height(包含border-[top/bottom]和padding-[top/bottom])
节点的宽高计算公式如下。
- 横向：
width = border + padding + width - 纵向：
height = border + padding + height
在IExplore中，若HTML文档缺失<!doctype html>声明则会触发怪异盒模型
两者区别
通过代码演示可能会更清晰，width和height的范围也一目了然，其实两者区别在于width和height包不包含border和padding。