CSS3---8.盒模型

1.在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：
a)padding + border + width = 盒子的宽度
b)padding + border + height = 盒子的高度
很明显，这不直观，很容易出错，造成网页中其它元素的错位。
2. CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
a)content-box:对象的实际宽度等于设置的width值和border、padding之和
b)border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度
3.浏览器的兼容性：
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-