html5中文学习网

您的位置: 首页?>?网页制作?>?css365可以把体育投注转到娱乐场吗_365体育网址全场高呼_365体育投注开户 ? 正文

CSS3属性box-sizing使用指南_css3_CSS_网页制作

[ ] 已经帮助:人解决问题
这篇文章主要介绍了CSS3属性box-sizing使用指南,需要的朋友可以参考下

box-sizing用于改变CSS盒子模型,从而改变元素宽高的计算方式。hUdHTML5中文学习网 - HTML5先行者学习网

box-sizing取值如下:hUdHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
hUdHTML5中文学习网 - HTML5先行者学习网
box-sizing: content-box | padding-box | border-boxhUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网

默认值是? content-box ,对应CSS2.1规范中标准的盒子模型计算方式,即 width 和 height 是内容区的宽与高, 不包括边框,内边距,外边距;hUdHTML5中文学习网 - HTML5先行者学习网

?padding-box 根据MDN的说法,目前还是一个实验性的属性, width 和 height 包括内容区和内边距,不包括边框和外边据;hUdHTML5中文学习网 - HTML5先行者学习网

?border-box 包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的 盒模型 。hUdHTML5中文学习网 - HTML5先行者学习网

例子(摘自MDN)hUdHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
hUdHTML5中文学习网 - HTML5先行者学习网
/* support Firefox, WebKit, Opera and IE8+ */hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
.example {hUdHTML5中文学习网 - HTML5先行者学习网
-moz-box-sizing: border-box;hUdHTML5中文学习网 - HTML5先行者学习网
box-sizing: border-box;hUdHTML5中文学习网 - HTML5先行者学习网
}hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网

对JS的影响hUdHTML5中文学习网 - HTML5先行者学习网
根据MDN的叙述:hUdHTML5中文学习网 - HTML5先行者学习网

由window.getComputedStyle 获取height时不会考虑box-sizing, 至少 Firefox 18 (bug 520992) 与 Internet Explorer 9 是这样,? 不过Chrome 24 不是(其它浏览器未测试). 注意 IE9 currentStyle 不能返回正确的height值。hUdHTML5中文学习网 - HTML5先行者学习网

关于Firefox 18及IE9之后的版本,我还没有测试。hUdHTML5中文学习网 - HTML5先行者学习网

关于jQuery中 .width() 和 .height() 的返回值hUdHTML5中文学习网 - HTML5先行者学习网
jQuery 1.8 版本之后增加了对 box-sizing 的支持,但这还与浏览器是否支持 box-sizing 有关,简而言之,1.8版本之后, .width() 和 .height() 返回的永远都是内容区的宽和高,见如下代码:hUdHTML5中文学习网 - HTML5先行者学习网


复制代码
代码如下:
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网
hUdHTML5中文学习网 - HTML5先行者学习网

各浏览器打印结果如下hUdHTML5中文学习网 - HTML5先行者学习网

IE6/7 : 500hUdHTML5中文学习网 - HTML5先行者学习网
IE8/9/10: 480hUdHTML5中文学习网 - HTML5先行者学习网
Safari5/6: 480hUdHTML5中文学习网 - HTML5先行者学习网
Chrome21/Firefox14: 480hUdHTML5中文学习网 - HTML5先行者学习网
?IE6/7不支持box-sizing,内容区的宽度是500,所以输出的值也是500,而其他支持该属性的浏览器,内容区宽度减去了 padding 和 border 的值,变成了480.hUdHTML5中文学习网 - HTML5先行者学习网

另:jquery中的 .outerWidth() 和 .outerHeight() 方法不受影响。hUdHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助