关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

当前位置 : 首页 » 网站建设 » CSS3的box-sizing属性 正文

CSS3的box-sizing属性

网站建设
2015年2月14日 / 57次阅读
标签:CSS

拍拍贷

文章《CSS3的box-sizing属性》的特色图片

开发网站的过程中,常常要考虑区域的大小问题,CSS3提供了一种设计选择,是否将区域的border,padding计算在width和height内,通过引入了一个新的属性来区分解决:box-sizing,它具有“content-box”和”border-box“两个值。

 

box-sizing:content-box

当我们设置 box-sizing: content-box; 时,浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,当它定义width和height时,它的宽度不包括border和padding。

 

box-sizing:border-box

当我们设置box-sizing: border-box; 时,浏览器对盒模型的解释与 IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

 

多浏览器支持

Firefox 请使用 -moz-box-sizing,

Safari / WebKit 请使用 -webkit-box-sizing,

Opera 直接用 box-sizing 即可。

 

2017-10-08:

看到还有一种属性值叫padding-box,就是将padding计算入width内。没有用过。

说实话,研究CSS在各种不同浏览器以及浏览器各种版本之间的兼容性,是个辛苦的事情,没有商业价值,还是放弃吧。以Google 的Chrome为准,看着OK,就行了。

本文链接:http://www.maixj.net/wz/css-box-sizing-2381
云上小悟 麦新杰(QQ:1093023102)

-- (*^-^*) --

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号苏ICP备14045477号-1

网站二维码
拍拍贷
go to top