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

1、什么是“盒子”......哦，这个问题有点简单，谁没用过盒子，鞋盒子装鞋子，电视盒子装电视......

瞧，这就是盒子，盒子是一种容器，且多为方形。

2、那盒子里面有什么呢?

比如，你要邮寄个东西，如果里面放了一个杯子，那是很容易破碎掉的，再比如你买个新电视、鞋子等，盒子里都有一个泡沫，用来起到缓冲的作用。

所以，我可以说，

盒子是由：物品+泡沫+盒子组成

3、OK，盒子是有厚度的吧，泡沫也是有厚度的吧。

如果我从上往下俯视盒子，那么盒子是由：

左盒子厚度+左泡沫厚度+物品空间的宽度+右泡沫的厚度+右盒子的厚度

没错吧！

这就是盒子！

1、这......还要说么？和现实中的盒子模型一模一样！

好吧，这样说好像有点不负责任，那咱们来看看网页盒子模型，你就明白我所言非虚。

2、请看下图：

content：放鞋子的地方，哦......不是，放网页内容的地方

padding:放泡沫的地方，哦......也不是，是放网页盒子填充物的地方

border:这不就是盒子本身么？也就是网页的边框。

margin:这是啥？盒子貌似没有这个吧？错！这个是盒子与盒子之间的距离。

举个例子，有一个仓库，放了100个盒子，他们全部层层叠叠放在一起，将整个仓库挤满了，互相没有空隙。好吧，你是不可能从仓库里拿出东西的，因为没有空隙！你手伸不进去不是（只是举例，别在意细节）

那么，如果没2个盒子之间，我都保留了10px的距离，OK，无论存取都非常的方便！

margin就是这个，盒子周围物品（或盒子、或墙壁（也就是浏览器的边）等）的距离。

简单吧，这就是一个鞋盒子！！！

3、OK,来看2个公式，这2个公式，小学生都看得懂。

盒子的宽度 = border-left+padding-left+content-width+padding-right+border-right

别告诉我你不知道border-left是什么，不就是盒子左侧的宽度么，剩下的以此类推

那么，

盒子的高度 = border-top+padding-top+content-height+padding-bottom+border-bottom

这就是网页的盒子模型

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