网页的轮廓

我们每天都会浏览各种各样的网站，看到的网页很多很多.......................................那大家是不是觉得这些网页各式各样，千秋百态，没有一点相似的地方呀！哈哈哈，不对，它们的内在结构都是大同小异的！可能有童鞋又要问——什么是内在结构呀？这就是我今天讲解的目的，请看下文吧。

先上个栗子

看这是什么？

没错，就是我们天天刷的知乎（请眼尖的童鞋忽略右边的屁股，我不是故意的。。。）

它的结构是什么样子呢？

就是酱紫的，虽然相似度只有99%（另外1%被我省略掉了。。。不要揍我，不是我懒，是因为省略的部分只会增加大家的困惑），但是大体上反映了这个网页的结构。咳咳，接下来来点专业的，请各位集中精神。

一般写过一些css的童鞋都应该知道，css中最基本的单元就是box(盒子)。box有多种，最主要的是block-level box和inline-level box。

上图中每个长方形都代表着一个box，并且他们都是block-level box。他们为什么能够如此整齐的排列呢？这全靠css的规则！

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties.

In a block formatting context, each box's left outer edge touches the left edge of the containing block .

这些规则表明：

• 在block formatting context中，box从containing box(看第11条)的上方开始，依次从上至下排列，最左边的box的左外边缘会触碰到containing box的左内边缘。
  
• 垂直方向相邻的box之间的距离通过margin来调节。

有童鞋可能对block formatting context感到陌生。它其实就是一个范围，在这个范围内所有box都是block-level box。block formatting context可以由

• 浮动元素（即float属性值不为none的dom元素）
  
• 绝对定位元素（即position属性值为absolute或fixed的dom元素）
  
• 不是block box的block containing box（如display值为inline-block或table-cell或table-caption的dom元素产生的box）
  
• overflow值不为visible的block box

的任何一个产生

对比上面的结构图，除了紫色块产生的是inline formatting context（请参考这里），其他颜色块都产生了一个block formatting context。在这些block formatting context中，block-level box遵循着css规则整齐的排列着，要不然网页哪有那么整齐啊！

当然，如果有童鞋想要改变这种排列规则，我们也是有办法滴（此处有窃喜*^ ^*）！最新的css 盒模型已经支持通过属性来设置block-level 在block formatting context中的排列。这个超厉害的属性就是block-progression，它可以设置block-level box从左至右或从右至左或从上至下排列，不过目前存在一个硬伤，就是部分浏览器不兼容，感兴趣的童鞋去研究研究吧。

今天的内容就先到这了，block-level box的排列想必大家都了解一二了吧，之后还会有更详细的出来，敬请期待！