css3教程：box-sizing属性

最新推荐文章于 2024-07-09 15:27:52 发布

chen_sh_sh

最新推荐文章于 2024-07-09 15:27:52 发布

阅读量592

点赞数

分类专栏： css html 文章标签： css3 box-sizing border-box content-box

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文详细介绍了CSS3中box-sizing属性的两种模式：content-box和border-box，阐述了它们如何影响盒子模型的计算，并通过示例展示了如何在不同浏览器中正确应用这些属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到 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

Firefox 请使用 -moz-box-sizing

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

Opera 直接用 box-sizing 即可。

转载请注明本文链接： http://www.rainleaves.com/html/1740.html