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 属性的值。