DIV+CSS两种盒子模型（W3C盒子与IE盒子）

淡淡的烟草味﹌ 2022-08-05 02:23 240阅读 0赞

在辨析两种盒子模型之前，先简单说明一下什么叫盒子模型。  
  
原理：  
  
先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。  
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。  
  
特点：  
  
每个盒子都有：边界、边框、填充、内容四个属性；  
每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。（以上原理与特点摘于百度）  
  
下面这幅图里面，分别是W3C盒子和IE盒子的模型：   
  
![20140725102923126.jpg][]   
  
大家肯定都能发现，这两种模型整体来说非常的相似。由内到外都是content,padding,border,margin。但是仔细看的话，虚线延长出来的部分，分别标注了height和width，但是在W3C中，虚线包围的部分只有content，而在IE中，虚线包围的部分是content+padding+border。这是最直观的不同，同时这也就是这两种模型的最大不同点。  
W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分  
IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding  
  
用一个例子来实现一下W3C盒子模型:

1.  <html>  
    
2.                  <head>  
    
3.                                  <title>盒子模型</title>  
    
4.                                  <style>  
    
5.                                                  \#box\{  
    
6.                                                                  width:100px;  
    
7.                                                                  height:100px;  
    
8.                                                                    
    
9.                                                                  padding:40px;  
    
10.                                                                   
    
11.                                                                 border:solid 40px green;  
    
12.   
    
13.                                                                 margin:20px;  
    
14.                                                 \}  
    
15.                                                 div\{  
    
16.                                                                 font-size:30px;  
    
17.                                                                 color:red;  
    
18.                                                                 background-color:gray;  
    
19.                                                                 text-align:center;  
    
20.                                                                   
    
21.                                                 \}  
    
22.                                 </style>  
    
23.                 </head>  
    
24.                 <body>  
    
25.                                 <div id="box">  
    
26.                                                 W3C盒子模型  
    
27.                                 </div>  
    
28.                 </body>  
    
29. </html>

复制代码

运行结果:  
  
  
![20140725110753412.png][]   
  
  
这张图只能看到内容和边框。看不到具体的分界线，也就不知道填充（padding）和内容（content）具体的排布。  
这里我就顺便介绍一中调试工具，firefox浏览器里面的firebug，对于平时调试网页布局各方面的有很大的帮助。  
  
  
![20140725111242559.png][]   
  
  
调试界面就是这样了。鼠标选中<div>标签，图像就发生变化了，整体布局就很清晰了。（如下图）  
![QQ截图20140725151348.jpg][QQ_20140725151348.jpg]   
这就很清晰了吧。同时也说明了W3C盒子包含了content，padding，border三部分。  
IE盒子的就不写了，有需要的同学可以自己试试。目前大多的网页布局都是用W3C盒子，它的兼容性非常好，所以是不二之选。

[20140725102923126.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/25/1509591jzv1bont9v1eqjg.jpg
[20140725110753412.png]: http://bbs.html5cn.org/data/attachment/forum/201407/25/151139tkj4kt5jv4v5eg8j.png
[20140725111242559.png]: http://bbs.html5cn.org/data/attachment/forum/201407/25/151319oklvjeallkol7e0z.png
[QQ_20140725151348.jpg]: http://bbs.html5cn.org/data/attachment/forum/201407/25/1514040nsei997a4i8jsu8.jpg