CSS3盒模型

CSS3中可以通过box-sizing来指定盒模型，这样我们就可以设置如何计算一个元素的总

宽度和总高度。

IE8开始支持CSS3属性box-sizing,让我们可以自由选择采用哪种盒模型

属性值:

content-box-一默认值，采用Standard box model

border-box- -一采用IE box model

inherit- - 继承父元素属性值

content-box

默认值，标准盒子模型，盒模型是外扩的。

width与height只包括内容的宽和高。

在width和height之外绘制元素的内边距和边框。

盒子总体大小为width(height) + padding + border,

内容区域是width和height部分。

border-box

怪异模式，盒模型是内减的。

width和height属性包括内容，内边距和边框，但不包括外边距。

为元素指定的任何内边距和边框都将在已设定的width和height内进行绘制。

盒子总体大小为width和height,

添加了padding和border后，内容区域会收缩。