网页是这样“层”的

看过一期“职来职往”，当时达人们给面试者出了这样一道问题：下面这张图片

是由几层构成的。当时的大屏幕是有动画效果的，立体感比较强。这个问题很简单，答案是三层，选手可能由于比较紧张，所以答案有出入。学习了div+css这一阶段的知识，不禁让我联想到了这一期节目，我们所谓的“div”这是跟这位达人的问题切合。

如果想熟悉div和css的布局方法，首先要对盒子模型有足够的了解，每个html元素都可以看做一个装了东西的盒子，盒子里面的内容到很自的边框之间的距离也就是填充（padding），盒子本身有的边框（border），而盒子边框外和其他盒子之间，还有边界（margin），这几个概念应该是盒子模型里面最基本最本质的概念了，大家看下面的图片可能会更清晰一些：

1号位置：margin；

2号位置：border；

3号位置：padding；

4号模型：实际填充的内容。

理解了盒子模型的概念之后下面就可以轻松的理解层的概念了，我们拿一个网页来说明一下：

可以看到这个网页的结构非常简单，没有纷繁绚丽的界面，正好可以拿来说说我们的层的概念。

仍旧以图来说明

上图中部分的编号对应着自己是第几层的。

我们来说说第三层：其实它下面还有一层和二层；当然这个网页做出来不一定非要一层摞二层摞三层，也可以把网页整体拆分。

我要说的网页中层的概念就这么多了，欢迎大家提出宝贵意见