盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型:
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。
从上图可以看到 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这样的盒子模型
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属性来事先判断浏览器的盒子模型了。
CSS3规范定义了一个名为box-sizing的规则,这个规则具有两个值:border-box和content-box,这两个值分别对应着传统模型和W3C模型。现在,Opera和Firefox都支持这一规则,开发者可以根据情况选择不同的盒子模型。在Firefox里,这个属性的语法有些细微的差别:Firefox在这个规则名字的前面加上了–moz-,并且它也支持–moz-box-sizing:padding-box,这个值的意义非常清楚,应该不需要解释。