CSS3 Box-sizing

                                       CSS3  Box-sizing

CSS 盒模型  Box Model分为两种 ：第一种是W3C标准模型，另一个是IE传统的模型.

W3C标准的 Box Model :

外盒尺寸计算如下：

盒子空间高度=content height +padding+border+margin

盒子空间宽度=content width+padding+border+margin

内盒尺寸计算如下：

盒子空间高度=content height +padding+border

盒子空间宽度=content width+padding+border

IE传统下Box Model:

content height=盒子空间高度-margin-border-padding(其中盒子空间高度  即设置的height)

意思也就是：height包含了元素内容高度，边框高度，内距高度

content width=盒子空间宽度-margin-border-padding(其中盒子空间宽度   即设置的width)

意思也就是：width包含了元素内容宽度，边框宽度，内距宽度

目前浏览器大部分元素都是基于W3C标准的Box Model上，但对于form中的部分严肃还是基于传统的Box Model上，例如form中的这些元素submit  reset  button 和select 等设置border  padding   ，它都会往内延伸。常用的form元素只有text和textarea 是遵循W3C标准的Box Model  ，其他都是遵循IE传统的Box Model.

语法：box-sizing:content-box  ||  border-box  ||inherit

浏览器兼容：

box-sizing 现代浏览器都支持，但是IE中只有IE8版本以上支持，虽然现代浏览器支持box-sizing，丹有些浏览器还是需要加上自己的前缀，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核需要加上-o-,IE8需要加上-ms-所以box-sizing兼容浏览器时需要加上各自的前缀