CSS样式box-sizing,-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box

阅读更多

box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding)
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。
示例：
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
实际宽度为：200+10*2+15*2
内容宽度为:200
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
实际宽度为：200
内容宽度为:200-10*2-15*2
说明
设置或检索对象的盒模型组成模式。
对应的脚本特性为boxSizing。
写法：
内核类型写法(box-sizing)
Webkit(Chrome/Safari)-webkit-box-sizing
Gecko(Firefox)-moz-box-sizing
Presto(Opera)-o-box-sizing
Trident(IE)IE8:-ms-box-sizing/IE9:box-sizing
浏览器是否支持：
(×)IE6
(√)Firefox 2.0
(√)Chrome 1.0.x
(√)Opera 9.63
(√)Safari 3.1
(×)IE7
(√)Firefox 3.0
(√)Chrome 2.0.x
　
(√)Safari 4
(√)IE8
(√)Firefox 3.5


-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box; 在css3中前面的-moz 、-ms、-webkit什么意思
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性