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和contentbox-sizing:border-box;元素的宽高包含border、padding和content （常用，IE怪异盒模型）box-sizing: inherit;规定应从父元素继承 box-sizing 属性的值。