CSS 盒子(box)

CSS盒子又称为CSS盒模式，是CSS非常重要的一部分。尤其在网页的布局中更是必不可少的。

CSS盒子(CSS box)

首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：

内容(content)、填充(padding、边框(border)和边界margin。

盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。当然了，在CSS中的盒子是平面的。

下面一个一个地介绍组成盒子的几个属性。

CSS边框(border)

首先我们来为上一节的box div添加边框。代码修改如下：

.box { background-color: #EEFAFF; width: 30%; float: left; border: 1px solid #000000; }

查看修改后的页面，可以看到box的外边多了一条1像素宽的黑色实线边框。在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，其实它等效与下面的CSS语句：

border-style:solid; border-color:#000000; border-width:1px;

其实CSS中还有一些属性支持这样的写法，比如之前学过的font。但是我们在这个入门教程中将不做过多的讨论，而在CSS应用教程中介绍。下面让我们来看看如何控制某一侧的边框属性。我们为boxhead div添加一个1像素的虚线下侧边框。修改的代码如下：

.boxhead { font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; }

上面的例子只用到了两种边框，下面来看看其它几种样式的边框。

CSS填充属性(padding)

填充属性定义的是内容(content)与边框(border)的距离，下面我们来为boxhead div添加一个5像素的填充。

.boxhead { font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; padding:5px; }

是不是boxhead div中的内容距离边框有了一段距离？与边框属性(border)一样，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。

CSS边界属性(marging)

为了更好的理解边界(marging)属性，我们现在试着为网页多添加几个box，然后再看看网页的外观。你会发现box都连在了一起，也许你不喜欢这样的布局，事实上我也不喜欢。那么我们就为他们设置边界属性吧，需要修改的代码如下：

.box { background-color: #EEFAFF; width: 30%; float: left; border: 1px solid #000000; margin:5px; }

修改之后的页面,所有的box之间都有了5个像素的间隔，这就是边界属性的作用。当然了，边界属性与其他两个构成盒子的属性一样都可以单独定义某一个方向。

至此，我们已经了解了构成盒子的几个元素。不过想要完全的掌握盒子的还需要不断的实践，尤其是想要完全用盒子来取代table定位的朋友更是要花一定的时间在实践练习上。