css3教程:box-sizing属性

说到 IE 的 bug,在 IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将 border 与 padding 都包含在 width 之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的 CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性: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。

示例如下:

<div style="width:400px; height:50px; background-color:#eee; padding:5px;">
	<div style="width:200px; line-height:20px; border:10px ridge #f60; padding:5px; float:left; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box">width:200px</div>
    <div style="width:200px; line-height:20px; border:10px ridge #0f0; float:left; padding:5px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box">width:200px</div>
</div>
width:200px
width:200px

Firefox 请使用 -moz-box-sizing

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

Opera 直接用 box-sizing 即可。

马上分享给你的朋友吧~

css3教程:box-sizing属性》上有 15 条评论

  1. Pingback 引用通告: 盒模型及IE盒模型中的bug _ 雨打浮萍

  2. Pingback 引用通告: css3 calc()自适应布局 _ 雨打浮萍

  3. Pingback 引用通告: 盒模型及IE盒模型中的bug | 我的互联网世界

  4. Pingback 引用通告: css3教程:box-sizing属性(雨打浮萍) | bing

  5. 杭州东方魅力招聘模特www.dongfangmeli.com
    杭州魅力金座招聘模特网站:www.haolun168.com
    杭州东方魅力公司网站:www.dongfangmeli.com

  6. Pingback 引用通告: WEB前端开发 - box-sizing属性

  7. Pingback 引用通告: css3教程:box-sizing属性 _ 多看 – Hank的备忘录,关注互联网技术和创业

  8. 刚好遇到这个问题,使用ujian的推荐功能,发现显示是乱的,原来就是bordor-sizing在捣蛋啊。。。谢谢分享。。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>