这里我们先简单的说一下“文档流”。就是把一个页面看做一个河流,里面的所有元素,具有向着某个特定方向流动的趋势。

打一个最简单的比方,现在页面中有三个段落,那么它们从上往下排布。如果我在代码中彻底删掉第一段,那么剩下的两段会怎样呢?

答案当然是它们会向上移动到页面的最顶端,这在我们看来是理所当然的。

这就是第一个规律,文档中所有内容,默认都具有一个尽量靠上的趋势。这就是把我们认为理所当然的东西,用语言归纳表达了一下。

那么在一行文字里,也是一样的,不过除了有一个向上的趋势,还都有一个向左的趋势。想一想也很容易理解,对吧?

这就是基本的文档流。

虽然上面都能够听得懂,但是用这些刚刚接触到的专业术语去讲,就会显得越来越复杂。所以我们干脆讲一个故事:

某一天,小老鼠的书写出来了,进行签售。那场面万人空巷。不是吓跑了,是都过来抢购了。

那么现在假设图书签售的摊位,位于网页的左上角。人们都朝着这个方向蜂拥而来,当然,如果自己前面堆满了人,虽和摊位还有一定距离,但确实已经无法前进了,只能站在原地排队等候。这就是大家都有朝着某个方向前进的趋势,但是如果前面已经堆满了人,那么实际大家都是静止不动的。(都在一边排队,一边抱怨,这个队伍为什么一直都没有动?

当然这么混乱着不是办法,于是,我们就要维持秩序,大家排队吧,从页面的左侧一直排到右侧,折回来排第二队……这种大排长龙的景象,大家应该都见过。

● ←这个圆点就是小老鼠签售的摊位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ……这些是排队的人群

好了,到目前秩序井然。不过也有外地来的朋友,是组团的,作为一个团体,他们不希望走散了。所以这些人非常连贯的排在了一起,队长站在最前面,副队长站在最后面,这样就不容易走散。

但是他们并不会有什么特权,也是和大家一样的排队。这就是行内元素。

● ←这个圆点就是小老鼠签售的摊位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28 ……这些是排队的人群
这些身着粉色队服的,他们是一个团队,这个整体就是一个行内元素。队长是元素的开始标签,副队长是元素的结束标签,

但是现在出来了一些意外情况,某大公司,决定集体出来购买图书,作为公司的福利。虽然说他们也会按顺序排队,但是因为自己这边人多,为了便于管理,就希望和其他人划清界限。

比如说他们到来之后,并没有紧紧的贴在队尾。而是在队尾后面单独开始排队,一个属于他们自己的队伍。当然,他们的队尾,也不允许不属于他们公司的人员进入。

● ←这个圆点就是小老鼠签售的摊位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28
这里是一个公司,他们没有插队。但是为了和其他人区分,所以前后并没有和队伍进行衔接。这就是一个块元素,努力的和前后区分开,独自占据整个宽度。
n n+1 n+2 ……这些是排队的人群

换句话说,他们很遵守秩序。只是把自己的前后和其他人进行一个分隔,避免混乱。

在公司的内部,还分有许多的部门,虽然每个部门都集中在一起,但是同属于一个公司,就没必要像和外人那样分隔的那么明显,所以他们也连贯的排在一起。

● ←这个圆点就是小老鼠签售的摊位

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28
队长 1 2 3 4 5 副队 队长 1 2 3 4 5 副队 队长 1 2 3 4 5 副队 企业内部的三个部门,按照顺序排队。可以说这个企业,就是这个巨大队伍中独立出来的一个小的队伍。
n n+1 n+2 ……这些是排队的人群

再说一遍,其中每个小团队,他们整体上是一个行内元素;这个公司在整体上,是一个块级元素。

那么块级元素中可以放行内元素,而行内元素中不可以放块级元素(放不下的呀。

【本章助记卡片:卡片 for 第四十五章