CSS中所谓的盒子是什么意思？
首先要清楚，CSS中没有box这个属性。CSS的盒子(box)是由以下几个部分组成的：
内容(content)、填充(padding)、边框(border)和边界(margin)。盒子的内容当然是必须有的，而填充、边框和边界都是可选的。如果把CSS的盒子看做现实生活中的盒子，那么内容就是盒子里装的货物；而填充就是怕货物损坏而添加的泡沫或者其它抗震的东西；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能与其他物体紧挨在一起，而必须有一段空隙。
下面我们来一个一个地介绍组成盒子的几个属性。
CSS边框(border)
首先我们来为box div添加边框。 代码如下：
查看可以看到box的外边多了一条1像素宽的黑色实线边框。在border: 1px solid #000000;一句中，我们一起为border指定了三个属性值，
其实它等效与下面的CSS语句：
其实CSS中还有一些属性支持这样的写法，比如font。
下面让我们来看看如何控制某一侧的边框属性。我们为boxhead div添加一个1像素的虚线下侧边框，修改的代码如下：
上面的例子只用到了两种边框，下面来看看其它几种样式的边框。
<p style="border:dotted"> </p>
<p style="border:double"></p>
<p style="border:groove"></p>
<p style="border:inset"></p>
<p style="border:outset"></p>
<p style="border:ridge"></p>
CSS填充属性(padding)
填充属性定义的是内容(content)与边框(border)的距离，下面我们来为boxhead div添加一个5像素的填充。
看看 是不是boxhead div中的内容距离边框有了一段距离？与边框属性(border)一样，填充属性(padding)也可以只设定某一边。例如：padding-left、padding-bottom。
CSS边界属性(marging)
为了更好的理解边界(marging)属性，我们现在试着为网页多添加几个box，然后再看看。你会发现box都连在了一起，也许你不喜欢这样的布局，事实上我也不喜欢。那么我们就为他们设置边界属性吧，需要修改的代码如下：
所有的box之间都有了5个像素的间隔，这就是边界属性的作用。当然了，边界属性与其他两个构成盒子的属性一样都可以单独定义某一个方向。
