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

[size=medium]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[/size]

[color=black][size=medium]
-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私有属性[/size][/color]
     
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值