CSS布局页面之盒子模型

        要想学会用CSS布局页面，就首先要理解盒子模型！

        什么是盒子模型？如果我们不知道盒子模型是什么，但是对于生活中的盒子一定都很熟悉，这里提到的盒子模型就可以理解成现实生活中的盒子，之所以叫它盒子模型，当然是跟盒子有关啦。

        既然和现实生活中的盒子一样，那我们想一下，生活中的盒子是什么样子的，内部是空的来存放东西，而里面存放东西的区域我们给他起个名字叫content(内容)，而盒子的纸壁给他起个名字叫border(边框)，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫padding(内边距)，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为margin(外边距)。

        这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图

       我们的页面就是由许许多多的盒子组成的，但是和现实生活中的盒子我们会忽略外边距(margin)，但是在页面中，我们是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，我们也不要忽略它，要知道他是存在的。

       这就是盒子模型，不管学习什么新知识，只要和生活中的事物联系起来，就很简单了，也就是把新知识变成旧知识。