ie盒子模型和标准w3c盒子模型_资料收集(仅供参考)

《ie盒子模型和标准w3c盒子模型_资料收集(仅供参考)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：从上图可以看到标准W3C盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。IE盒子模型从上图可以看到IE盒子模型的范围也包括margin、border、padding、con

2、tent，和标准W3C盒子模型不同的是：IE盒子模型的content部分包含了border和pading。例：一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，如果用标准W3C盒子模型解释，那么这个盒子需要占据的位置为：宽20*2+1*2+10*2+200=262px、高20*2+1*2*10*2+50=112px，盒子的实际大小为：宽1*2+10*2+200=222px、高1*2+10*2+50=72px；如果用IE盒子模型，那么这个盒子需要占据的位置为：宽20*2

3、+200=240px、高20*2+50=70px，盒子的实际大小为：宽200px、高50px。那应该选择哪中盒子模型呢？当然是“标准W3C盒子模型”了。怎么样才算是选择了“标准W3C盒子模型”呢？很简单，就是在网页的顶部加上DOCTYPE声明。如果不加DOCTYPE声明，那么各个浏览器会根据自己的行为去理解网页，即IE浏览器会采用IE盒子模型去解释你的盒子，而FF会采用标准W3C盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了DOCTYPE声明，那么所有浏览器都会采用标准W3C盒子模型去解释你的盒子，网页就能在各

4、个浏览器中显示一致了。再用jQuery做的例子来证实一下。代码1：varsBox=$.boxModel?"标准W3C":"IE";document.write("您的页面目前支持："+sBox+"盒子模型");上面的代码没有加上DOC

5、TYPE声明，在IE浏览器中显示“IE盒子模型”，在FF浏览器中显示“标准W3C盒子模型”。代码2：

6、guage="javascript">varsBox=$.boxModel?"标准W3C":"IE";document.write("您的页面目前支持："+sBox+"盒子模型");代码2与代码1唯一的不同的就是顶部加了DOCTYPE声明。在所有浏览器中都显示“标准W3C盒子模型”。所以为了让网页能兼容各个浏览器，让我们用标准W3C盒子模型。IE6盒子模型中，盒子的尺寸包含了内容区，padding，border和margin这四个部分，而W3C的盒子模型中，盒子的尺寸只包含

7、内容区，padding，border和margin被排除在盒子尺寸之外。盒子模型(BoxModel)是CSS的核心，现代Web布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子模型与它们的摆放控制，会发现再复杂的页面也不过如此，然而，任何美好的事物都有缺憾，盒子模型有两种不同的诠释，一种来自IE6，一种来自W3C标准浏览器。盒子模型下图就是一个典型的盒子模型示意图在内容区外面，依次围绕着padding区，border区，margin区，这一模型结构在所有主流浏览器都是一致的。通过盒子模型，我们可以为我们的内容设置边界，留白以及边距，盒子模型最典

8、型的应用是这样：我们有一段内容，可以为这段内容设置一个边框，为了让内容不至于紧挨着边框，可以设置padding，为了让这个盒子不至于和别的盒子靠得太紧