标准盒子模型和IE盒子模型

来源：互联网发布：无线端淘宝卖家运营编辑：程序博客网时间：2024/06/04 18:16

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：

标准盒子模型

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子模型

　从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

网页中的盒子模型；我们常常要控制盒子模型的宽度width:

w3c中的盒子模型的宽:包括margin+border+padding+width;

width:margin*2+border*2+padding*2+width;

height:margin*2+border*2+padding*2+height;

iE中的盒子模型的width:也包括margin+border+padding+width;

上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

扩展：Jquery中的$.boxModel属性（判断浏览器是什么类型的盒子模型）

Jquery提供了 $.boxModel属性来判断浏览器采用的是什么样的盒子模型，但是通过测试，ie6以上（包括IE6)，跟Fireforx一样，采用的都是标准的W3C盒子模型，测试代码如下：
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("您的页面目前支持："+sBox+"模型");

按照曾顺的测试，ie7中采用的是IE的盒子模型。真的让人搞不懂，为什么微软的IE6都还遵循W3C的盒子模型，而在IE7中却又采用了IE的盒子模型。
后来我查阅了下资料，我用的是vs创建的网页，因此，它会在第一行加上如下的DOCTYPE 声明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果把这一行注释掉后，那么IE6下就采取的是IE的盒子模型了。也就是说，不管是什么样的IE浏览器还是其它标准的浏览器，都可以在代码前加上DOCTYPE声明而统一的采取W3C的盒子模型。既然如此，就可以不使用Jquery的boxModel属性来事先判断浏览器的盒子模型了。

解决办法：

方法一：

通过指定一种上文列出的DOCTYPE，在IE里使用标准模式，在这种情况下，Web页面像其他所有浏览器一样使用W3C的盒子模型。

方法二：

通过box-sizing CSS规则强制其他浏览器都使用传统盒子模型。

CSS3规范定义了一个名为box-sizing的规则，这个规则具有两个值：border-box和content-box，这两个值分别对应着传统模型和W3C模型。现在，Opera和Firefox都支持这一规则，开发者可以根据情况选择不同的盒子模型。在Firefox里，这个属性的语法有些细微的差别：Firefox在这个规则名字的前面加上了–moz-，并且它也支持–moz-box-sizing:padding-box，这个值的意义非常清楚，应该不需要解释。

0 0