CSS——两种盒模型
盒子模型分为两种：
第一种是W3C标准的盒子模型（标准盒模型）
第二种IE标准的盒子模型（怪异盒模型）
1、标准盒模型
标准盒模型width指的是内容区域content的宽度；
height指的是内容区域content的高度
W3C标准盒模型下盒子的大小 = width （ content ） + border + padding + margin
2、怪异盒模型
怪异盒模型中的width指的是内容、边框、内边距总的宽度；
height指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小 = width （ content + border + padding ） + margin
CSS3的box-sizing
box-sizing属性是用来切换盒模型
box-sizing的默认属性是content-box
| 属性值 | 意义 |
|---|---|
| box-sizing:content-box; | 元素的宽高只包含content（W3C标准盒模型） |
| box-sizing:pandding-box; | 元素宽高包含padding和content |
| box-sizing:border-box; | 元素的宽高包含border、padding和content （常用，IE怪异盒模型） |
| box-sizing: inherit; | 规定应从父元素继承 box-sizing 属性的值。 |