8年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而我所住的小县城并不通火车，火车票都要去市里的火车站购买，而从县城到市里，来回就是4个小时车程，简直就是浪费生命。后来就好了，小县城里出现了火车票代售点，可以直接在代售点购买火车，方便了不少，全市人民再也不用在一个点苦逼的排队买票了。
CDN就可以理解为分布在每个县城的火车票代售点，用户在浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求，这样海南移动用户的请求就不会千里迢迢跑到北京电信机房的服务器（假设源站部署在北京电信机房）上了。
1) 指定堆叠层次:’z-index’属性
‘z-index’
取值： <integer> | inherit
初始： auto
适用于：定位元素
继承： 否
百分比： N/A
对于一个定位框，’z-index’属性指定了：
取值的含义如下：
<integer>: 该整数是生成的框在当前堆叠内容中的堆叠层次。该框生成一个新堆叠上下文，且在其中它的堆叠层次是’0’。2) 堆叠上下文
堆叠上下文能包含更深层的堆叠上下文。一个堆叠上下文从它的父级堆叠上下文的观点来看是原子的;在其它堆叠上下文的框可能不干涉它的任何框。
每个框属于一个堆叠上下文。每个定位的框在给出的堆叠上下文有一个整数的堆叠级别，堆叠级别是它在相同堆叠上下文里面z-轴相对于其它堆叠级别的位置。有较大堆叠级别的框总是会被格式化在较低堆叠级别框的前面。框可以有负的堆叠级别。
在同一堆叠上下文中，具有相同的堆叠级别的框根据文档树自然定义顺序由后到前堆放。
3) 堆叠上下文的生成
根元素形成根堆叠上下文。
为“已定位的元素”(包含相对定位元素)指定一个有效的数值z-index，将会生成新的堆叠上下文，且生成盒在当前层叠上下文中的层级为 0。
当“已定位的元素” 指定 z-index: auto，生成盒在当前层叠上下文中的层级为 0。但该盒不建立新的层叠上下文。
此处：“定位”指的是 position 为 relative 、absolute 、fixed 的元素，“非定位”则指static。
3) 堆叠上下文中层级的顺序
在每个堆叠上下文中，下面的层在从后到前的顺序中绘出:
在每个堆叠上下文，定位元素的堆叠级数为0(第6层)，非定位浮动(第4层)，内联块(5层)，还有inline table(5层)，被渲染好像那些元素本身生成新的堆叠上下文，除了它们定位的后代和任意将是子堆叠上下文参与当前的堆叠上下文。
该渲染顺序递归地应用到每个堆叠上下文。
4) CSS3 带来的变化
以下情况会产生新的层叠上下文：
z-index 值不为 autodisplay: flex|inline-flex)，且 z-index 值不为 autoopacity 属性值小于 1transform 属性值不为 nonemix-blend-mode 属性值不为 normalfilter 属性值不为 normalisolation 属性值为 isolateposition: fixedwill-change中指定了上述任意属性，即便你没有直接定义这些属性-webkit-overflow-scrolling 属性值为 touch以上元素建立新层叠上下文的同时，也会提升元素自身所在层叠上下文中的层级。
在前面的帖子中，我们已经讲了可视化模型中布局的两大方面：1. 常规流 2. 浮动，布局3大部分只剩下了绝对定位。前面的帖子中也零星的提到过关于绝对定位的某些特性，但都不够细致系统。
浮动带给我们一个不属于常规流的世界: 它不能超出它的包含块，它的位置跟在它之前的元素生成的框有关系(详见前面的浮动规则)…… 那么，它对处于它后面的元素有什么关系呢？对于块框，会认为它不存在，行框会绕着它排列！有没有方法使块框也可以在它后面排列，而不再当它不存在呢？答案是肯定的。W3C总是透着一种非常人性化的味道。clear 特性就是做的这件事。从某种意义上来说，clear 是对浮动框和常规流中框的一种关系上的平衡。
浮动是可视化格式模型中非常重要的一节。浮动跟堆叠层级(stack level)也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表示。但是，元素和元素之间的位置如果有所重叠，谁显示在前面，就涉及到另一个轴：z轴。我们经常使用的 z-index 就是如此得来的。浮动框在整个模型中，z轴坐标比常规流中的值要高，所以会飘在它上面。也可以把这个模型看作是 Photoshop中的图层，我们就好像在好多层玻璃上画框框，这些玻璃都叠在一起，我们只能透过一个窗口(浏览器可见窗口)来看这些玻璃重叠后的图画。浮动可以看作其中的一个图层。
在上文中，大致介绍了可视化模型中的定位体系。其中，常规流是最为基础的。这次就和大家分享常规流的一些布局要点和重要的概念。
曾经提到了：在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局会受四大因素的影响，其中之一，就是定位体系。
本文描述了CSS 2.1中可能产生的框的类型。在某种程度上，框的类型会影响其在视觉格式化模型中的表现。CSS属性中的display属性用来指定框的类型。
我们经常用到块元素、行内元素的概念，那么，到底什么是块元素，什么是行内元素，它们有什么特点，怎么形成的，有什么作用呢？什么是块框，什么又是行内框呢？下面，请大家跟我一起走近W3C标准，看个究竟吧。
上文说到，一个元素box的定位和尺寸，有时候会跟某一矩形框有关，这个矩形框，就被称作元素的包含块。包含块（Containing Block）是视觉格式化模型的一个重要概念，它也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。而元素会为它的子孙元素创建包含块，那么是不是说，元素的包含块就是它的父元素呢？答案是否定的。一个元素包含块的确定，跟元素自身和它的祖先元素的样式等有关系。
可视化格式模型是CSS核心中非常重要的概念。众所周知，盒模型规定了元素本身的行为，而可视化格式模型规定了用户代理（通常指用户浏览器）在媒介（通常是指显示器）中如何处理文档树，通俗地说，就是把这些元素盒子，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等。属于CSS的最为核心的概念之一。
可视化格式模型的概念非常多，我会分多次说明，我也会在我的能力范围内，尽量说的很细。