CSS盒子模型

CSS是网页设计的一项重要技术，而盒子模型又是CSS的核心内容。因此，正确理解盒子模型对网页的设计起着极其重要的作用。那么，关于盒子模型我们需要掌握哪些内容呢？

首先，什么是盒子模型？

 CSS盒子模式具备的属性： 内容(content)、填充(padding)、边框(border)、边界(margin)。如下图所示：

  

 

为什么叫它盒子模型呢？这是由于它和我们日常生活中的盒子完全类似。内容（CONTENT）就是盒子里装的东西；而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框 (BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。而在网页 设计上，最重要的内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）。

 

下面举个小例子具体介绍一下盒子模型。

实例一：

HTML代码：

<div class="first">
    <div class="second">

       womendoushi

    </div>

</div>

CSS代码：

.first

{

    width:202px;

    height:30px;

}

.second

{

    width:180px;

    height:30px;

    padding:20px;

    border:10px solid #f00;

    margin:5px;

}

下图是second盒子在网页的显示情况：

由内向外不同的颜色区域分别对应盒子模型的内容(content)、填充(padding)、边框(border)、边界(margin)属性。下图是各属性对应的数值大小：

我们可以看到设置的width、height属性对应的仅仅是内容区域，而不是整个盒子。相信看了上面这个例子，大家对盒子模型的内部结构有了一定的了解。

 

下面就让我们来看看两个盒子之间的关系。同样以上面的例子讲解，我们稍作改动：

实例二：

HTML代码：

<div class="first">

       <div class="second">

           womendoushi

       </div>

 </div>

 

CSS代码不变。

下图是最终的显示情况：

从HTML代码中我们知道second盒子是“装在”first盒子中的，而从CSS代码中我们发现：first盒子的总高度是30px，而second盒子的总高度是：height + 2 * padding + 2 * border + 2 * margin =30px + 2 * 20px + 2 * 10px + 2 * 5px = 100px  ，这样first盒子的高度就小于second盒子的高度，而在浏览器中我们却发现一切都显示正常，比较人性化吧，这也是CSS盒子模型与我们日常生活中盒子的本质区别。

 

不过，我们也不要为这种人性化设计太过高兴，万事都有利弊之分，我们只要稍作改动，问题立马就出来了，下面让我们试试：

实例三：

HTML代码：

<div class="first">

            <div class="second">

                womendoushi

            </div>

        </div>

        <div  class="third">

            现在还正常吗？

        </div>

</div>

同样，CSS代码不变。

显示结果如下：

看到结果了吧，你还会为它的人性化设计而高兴吗？下面让我们分析一下原因。由于second盒子是包含在first盒子中的，所以在确定third盒子的位置时不会考虑second盒子，仅会考虑first盒子，这样就会导致上面的悲剧。

 

相信看了以上三个例子，大家对CSS盒子模型的内部结构和盒子之间的位置关系有了一定的了解，但想要更好、简洁的布局网页内容，还必须了解浮动（float）技术。 所谓浮动呢，我理解就是要有一个文字围绕图片（当然也可以是别的）的效果，效果图如下：

 

关于浮动呢，我还没有深入了解，这里就不误人子弟了，CSS盒子模型也就介绍到这里了。