HTML网页制作：[19]什么是DIV盒子模型

div盒子模型，是现在网页布局的流行布局方法，学网页的必须会啊，不学网页的也知道点含义啊。下面，小编将介绍什么是盒子模型，什么是div

工具/原料

一台电脑

txt/DW等

一.什么是盒子

1、什么是“盒子”......哦，这个问题有点简单，谁没用过盒子，鞋盒子装鞋子，电视盒子装电视......瞧，这就是盒子，盒子是一种容器，且多为方形。

3、OK，盒子是有厚度的吧，泡沫也是有厚度的吧。如果我从上往下俯视盒子，那么盒子是由：左盒子厚度+左泡沫厚度+物品空间的宽度+右泡沫的厚度+右盒子的厚度没错吧！这就是盒子！

2、请看下图：content：放鞋子的地方，哦......不是，放网页内容的地方padding:放泡沫的地方，哦......也不是，是放网页盒子填充物的地方border:这不就是盒子本身么？也就是网页的边框。margin:这是啥？盒子貌似没有这个吧？错！这个是盒子与盒子之间的距离。举个例子，有一个仓库，放了100个盒子，他们全部层层叠叠放在一起，将整个仓库挤满了，互相没有空隙。好吧，你是不可能从仓库里拿出东西的，因为没有空隙！你手伸不进去不是（只是举例，别在意细节）那么，如果没2个盒子之间，我都保留了10px的距离，OK，无论存取都非常的方便！margin就是这个，盒子周围物品（或盒子、或墙壁（也就是浏览器的边）等）的距离。简单吧，这就是一个鞋盒子！！！

三.总结

1、通过上述的知识，你此刻应该可以理解网页的盒子模型，但还不知道如何使用盒子模型。下篇经验，我会继续讲解