浏览器上的“盒子”摆放

前言

依旧延续几篇博文的风格，旨在引出一些概念的东西，至于技术贴，以后再慢慢贴一些细节的东西。

上篇博文写了一点点自己关于“盒模型”的一些想法跟阐述，那既然盒子制造出来了，紧接着就是把它摆放到浏览器上了。

 

摆放盒子的启示

如果给我们一张设计图，图上标志着盒子摆放的位置方式等等，然后叫我们按着设计图拿一堆盒子去把它们摆放在地板上。

要是是我，我拿到设计图，我就开始按照第一个盒子摆放的方式先摆好，然后摆放第二个，直到设计图上标志的盒子全部被摆放好，这个摆放过程就结束了。

也许又是一个不是比喻的比喻，往往一个WEB应用背后有设计师，前端重构师，前端工程师等等，设计师根据产品经理的需求设计了一个很炫很炫的页面图，这时候前端重构师要负责把这个图转化成HTML+CSS，使得在浏览器上打开这个HTML文件的时候，出现了跟设计图一样的页面，然后要在各大浏览器测试一遍，要是挑剔的话，一个像素的偏差都要查得很仔细。

好吧，引出主题吧。

现在我们是前端重构师了，并且手里拿着一张图纸了，那就开始吧！

1. 打开图纸，你会看到上边有很多文字，图片等等，我们按照前面说的，应该把它划分（记得一定是水平方向跟竖直方向划分的）成很多很多的“盒子”，至于怎么划分，不想多讲，一般会有个切片的过程。
2. 现在手上已经有了很多盒子了，于是我们需要将它们相对的位置跟嵌套关系整理出来，这话讲得我自己都有点蒙。我在HTML|CSS|JS初探的HTML写过一个片段，还记得小R的head应该长在body上边吧，这个就是一种顺序的关系；还记得小R的eyes是长在head上边的吧，这个就是一种嵌套的关系。于是我们开始把刚刚的盒子开始整理，比如说盒子2放在盒子1的下一个位置，盒子3是装在盒子1里边的。至于什么是语义化，我就不在这多说了。
3. 当我们完成第二步之后，你会发现，现在盒子在地板上大概的位置都出来了，那还要做什么呢？对于设计图，我们需要还原成一摸一样，以至于盒子间1cm的距离我们都要算好，于是我们要开始整理盒子的大小、盒子内部的摆放、盒子间的距离等等。
4. 当然最后我们要看看这些盒子在IE底下摆放有没有问题，在Firefox底下有没有问题。

盒子的切分以及嵌套方式有无数种实现方法，但是要记得！语义化！

盒子的摆放顺序是从上到下，从左到右 ！

 

块

我们现在知道了，浏览器摆放着盒子，这里一块区域放着盒子1，在这块区域下边放着盒子2。我们就把这块区域定义成“块”！

我们还知道盒子里边是可以装着盒子的，于是里边的盒子的“父亲”就是外边的盒子。

块的一个属性就是在其“父亲”的区域里边只占领一行，也就是排在它后边的块需要排在它的下边而不是右边（你可以想象后边加上了回车换行）。

当然了，也有不是块的东西，可以使得它的下一个盒子跟它一起放在同一行。

 

浏览器上的“流”

这时候，我们先提到一种交互方式：弹窗。你是否在浏览某个网站的时候点击评论然后在页面正中间出现了一个对话窗口，叫你输入账号密码登录。要注意，这个窗口是“浮在”页面上边的！

这里又乱了，之前不是说盒子是按照顺序放好的，没有说能够这样叠放啊，怎么就这样叠在其他盒子的上边了呢？

如果你想到了上边这个问题，那就说明你了解了一些摆放的规律了。

先解释一下我个人对于“流”的想法，前面说到了，我们现在制作好了一堆盒子，也把它们的顺序理清楚了，我们要开始往画布上放盒子了！

于是我把盒子按照我定好的顺序放在一个传送带上边，然后我在传送带的那头一个一个的把盒子拿下来摆放到地板上。相信这样的处理应该挺合理的吧！？

这里的传送带就是我理解的“流”！

那为什么要这个传输带呢！？因为它帮我理清了顺序。

那跟上面说到的弹窗有说明联系呢！？因为这样的摆放方式我可以利用多个传送带来帮助我完成。

正常的话，我们只需要一个传送带就可以完成任务了，这个就叫做标准流或者文档流。

但是有时候我们需要块的下一个块要放在它的右边而不是下边的时候（就是块之间没有回车换行），我们需要告诉浏览器说，我这几个块是不同于标准的摆设方式的，所以浏览器把它们放在了另外一个传送带，也就是别的流里边。很明显，它们脱离了文档流！

现在可以想象一下，每个传送带的那头都有一个摆放的工作人员，他们对于这一条传送带的处理方式是唯一的。比如说工作人员A处理文档流，工作人员B处理浮动流。

于是传送带的那头的工作人员C开始按照顺序把盒子放在传送带上了，然后A拿到盒子按照A的理解放在地板上，B拿到盒子按照B自己的想法放在地板上。

我们假设盒子的摆放顺序就是：1,2,3,4……n。（数字为盒子编号）

盒子1跟盒子4放在文档流里边，盒子2和盒子3放在浮动流里边。

A拿到了盒子1放在地板上，然后A知道他下一个拿到的盒子应该放在盒子1的下边的！

紧接着B拿到了盒子2，他知道了下一个盒子按照要求应该放在盒子1的下边。

然后B拿到了盒子3，因为这个是浮动流传输带，B应该把盒子3放在盒子2的右边，而不是下边。

最后A拿到盒子4，因为A不懂B的想法，于是A还是乖乖的按照自己原先的思路把盒子4放在盒子1下边了。

 

不知道我讲明白没！？

在实际中很多时候我们都需要清除浮动流的，换句话说就是有某种方式可以把B的想法告诉A，于是A改变了原先的一些摆放技巧。

貌似还是没有说到弹窗的问题，弹窗就涉及到一个叫做绝对流。

这个流上的东西不会理会其他流的盒子是怎么放的，它可以直接把盒子放在任意你想放的位置。并且你要记得在浏览器上盒子是可以浮在空中的，但是你从空中看上去还是只是一个2D的画面，这就出现了弹窗的现象！

 

本篇总结

本篇提到了在页面上摆放元素的基本思路跟制作页面的缩略过程，并且阐述了关于CSS中流的概念，有些说法不够术语，但是旨在引出一些概念跟方便理解，欢迎拍板校正。