一、流
通常情况下，制作一个页面写的所有东西都是紧跟其前一个元素之后的，如同流水一般。如果是内联元素，从左往右排版，如果页面宽度不够，就换行继续。如果是块级元素，从上向下，每个元素都独占一行。这就是默认的布局方式——普通流，也叫常规流。页面的传统布局就是依靠控制流来实现横向、纵向布局。有常规流当然也有非常规的，使用浮动与定位后，元素会脱离普通流(浮动不是完全脱离)，也就是非常规流。这里的普通流不少地方也叫做文档流，其实文档流的说法是因为很多地方将CSS官方文档中的normal flow翻译错了，称为普通流的话更为专业。
前面提到脱离普通流，这个概念有点抽象。脱离普通流的元素与普通流中的元素的位置关系可以看作是PSD文件中不同的图层。可以通过index属性来调整脱离普通流后元素在第几层，使用定位后才能使用index属性。
二、盒子模型
网页中所有的文字、图片等内容都是写在HTML标签内的，可以将这些标签看作是一个容器——盒子。这个盒子的大小是多少呢？默认情况下，如果是块级元素，高度与内容高度相等，与页面同宽。如果是内联元素，可以简单的看作与内容区域同宽高。通过CSS设置width属性、height属性控制这个盒子内部（内容区域）的宽高（内部空间大了，整个盒子自然也大了）。可以通过向这个盒子使用padding属性来添加填充，达到使内容相对于这个盒子居中的效果（既然是填充，当然不能在填充部分放东西）。通过border属性给盒子加边框，美化这个盒子。想控制每个盒子的间距，可以使用margin，控制这个完全透明的“隔板”的厚度。假如给盒子盒子固定的宽高，当内容大于盒子时，内容会溢出，盒子不会有任何变化。补充：前面说到网页中所有HTML标签都可看作是一个盒子，那么body标签算吗？算的，并且细心观察会发现body标签是自带8px的外边距的。
<style>
div{
width: 20px; /* 盒子内容区域宽度20像素 */
height: 20px; /* 盒子内容区域高度20px */
border: 1px black solid; /* 给盒子四周加上1像素、黑色实线边框 */
padding: 2px; /* 给盒子内部四周填充2像素 */
margin: 20px; /* 给盒子外部四周加20像素间距 */
}
/* ==========================================================================
以上是复合属性，一次性同设置加盒子四周。想单独设置盒子某个方向的话在属性后加方向来单独设置
例如：
margin-top: 10px; 单独添加外上边距10像素
margin-right: 10px; 单独添加外右边距10像素
margin-bottom: 10px; 单独添加外下边距10像素
margin-left: 10px; 单独添加外左边距10像素
border与padding以此类推也是同样的方法。
========================================================================== */
<style>
上面的盒子实际宽高是多少？
这要分情况，因为盒子模型分为两种，一种是W3C标准盒模型，还有一种在低版本IE环境下的IE盒模型。两者两者的区别在于W3C盒模型的宽高等于内容+填充+边框+边距的总和。IE盒模型的宽高等于内容+边距，IE盒模型的填充和边框呢？IE盒模型将填充和边框都算在内容区域的。如果找到Windows 2000系统的主机，用其自带的IE浏览器就会发现，同样的属性，在现代浏览器与低版本IE的宽高是不一样的。使用box-sizing: border-box;也可以有IE盒模型的效果。
上面的盒子按照W3C标准盒模型计算的话是：
因为宽高设置同样的值，所以宽高都是：20+1*2+2*2+20*2=46px ;按照IE盒模型计算的话，宽高：20+20*2=40px。怎样快速理解盒子模型？用尽量少的div标签画一个远视图。
