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兼容浏览器时需要加上各自的前缀