盒子模型（标准盒模型、怪异盒模型）

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

1.   内容区域: content
2.   边框 : border
3.   内边距: padding
4.   外边距 margin
   
   ✳ 图中的蓝色部分即为content区域
   
   
   
   

二、盒模型的分类:

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

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

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

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

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

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
*即 box-sizing 属性可以指定盒子模型种类

属性值:

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