我们每天浏览网页，登录各种网站，可是有没有发现，尽管网页数量数不胜数，但是每个网页都是信息罗列的很整齐，页面设置页非常合理。这是怎么做到的呢？难道每个网页都是需要大量人手来管理的吗？这就是本篇博客要讨论的内容了----CSS盒子模型。

         这就奇怪了，我们平常所见的规划合理，摆放整齐的，经常见到的Excel等，也是和表格有关系，这个怎么就用到盒子了？使用Excel确实可以做到这样，可是你见过Word使用表格了吗？不照样很合理吗？其实，它们都用到了类似表格的技术，只是Excel是可见的表格，Word表格你看不见罢了。这里我们讨论的也是一种看不见的盒子CSS----盒子模型。

         先来看一下这个盒子模型：

        那么这个盒子说明了什么？具体又如何使用这个盒子模型呢？在web窗体设计中，我们可以将某一行数据或者某一块（矩形）的数据看做一个整体，然后将这个块当做一个盒子来处理。border就是这个盒子的边框；margin就是盒子之间的间距；padding就是盒子边框和盒子中内容之间的距离；width和height就是盒子内容的宽度和高度；content是具体内容。有了如此详细的划分，我们在设计web界面时就得心应手了。

         一行的内容我们可以选择简单的span标签来处理，如果是多行复杂的内容就需要使用div块来处理了，这就是赫赫有名的CSS+div。当然，一个盒子不可能解决界面的所有问题，这时我们就需要多个盒子了。多个盒子之间可以是并列关系，即两个或以上盒子共同来完成某个界面制作。如果两个盒子完成一个功能，那么以css文件中后边的为准。盒子之间也可以嵌套，这样的界面设计就更加精细了。

 嵌套盒子嵌套示意图

    从上面这个嵌套盒子模型示意图来看，盒子模型和Excel表格还是有区别的。盒子模型之间是可以有间距的，而excel表格之间是没有间距的，并且盒子的边框也是可以自由设置。

    盒子模型的使用，让我们方便的设计web界面，但是由于浏览器的兼容性问题，使同一个CSS盒子在不同的浏览器出现不同的界面，也是我们应该注意的。

CSS盒子模型