1、盒模型分类
标准盒模型（W3C）（现代浏览器采用的默认盒模型）
IE 盒模型（怪异）
相同点：都有content、padding、border、margin
不同点：标准盒模型实际大小：width+padding+border+margin
怪异盒模型：width包含padding和border，
即元素实际大小：width+margin
标准盒模型转为怪异盒模型：box-sizing:border-box;
怪异盒模型转为标准盒模型：box-sizing:content-box;
.............................................
2、标准盒模型组成
2.1 content（内容）
width * height
2.2 padding（内填充，内边距）
与 background 的颜色一样，包裹在内容外层
可以设置大小
padding：10px； 代表四个方向大小都是 10px
padding：10px 20px； 代表上下为 10px，左右为 20px
padding：10px 20px 30px； 代表上为 10px，左右为 20px， 下为 30px
padding：10px 20px 30px 40px； 代表上右下左
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
2.3 border（边框）
可以设置大小与颜色
设置字体边框,文字边框 -webkit-text-stroke:1px black;
2.4 margin（外填充，外边距）
透明区域
可以设置大小，即使大小为 0，margin 也是存在的
3、盒子的实际大小：
实际宽度 = width + padding * 2 + border * 2 + margin * 2
实际高度 = height + padding * 2 + border * 2 + margin * 2
4、padding 和 border 能影响怪异盒子
当 padding 或 border 大于设置的 width 时，就会影响怪异盒子的实际大小。