一、盒子模型的组成部分:

内容区域: content 边框 : border 内边距: padding 外边距 margin

✳图中的蓝色部分即为content区域

二、盒模型的分类:

1.W3C盒子模型(标准盒模型)

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

2.IE盒子模型(怪异盒模型)

而IE盒模型或怪异盒模型，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

三、CSS3指定盒子模型种类:

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

*即 box-sizing 属性可以指定盒子模型种类

属性值:

content-box: 指定盒子模型为W3C（标准盒模型）border-box: 为IE盒子模型（怪异盒模型）。inherit: 规定应从父元素继承 box-sizing 属性的值。