CSS二三事 -（文档流）

文档流

文档流的英文是 normal flow，如果直译的话，应该是正常流。文档流的含义就是文档的流动方向，内联元素从左到右，满一行之后换行，块级元素从上往下，每一个块级元素独占一行。

通过上图发现，span 元素从左到右依次排开，位置不够会进行折行显示，而 div 元素从上往依次排开，默认是撑满整行，但是就是宽度固定，它也独占一行。这就是文档流的全部含义了。

注意：在 HTML5 中，不再有什么 div 属于块级元素，span 属于内联元素，因为它们属于块级、内联、还是其他的元素是由 CSS 的 display 属性决定的，而恰好 div 的 display的默认属性值为 block，span 的 display 的默认属性值为 inline。

块级元素、内联元素、内联块级元素

在文档流中存在着最常见的三类元素：

• 块级元素：即 display: block 的元素
  1. 默认从上往下排列，每一个都另起一行。
  2. 默认自动计算宽度（撑满父级元素），也可由 width 属性指定。
  3. 高度由内部的文档流决定，也可以由 height 属性决定。
  4. margin，padding 有效，而且可能存在 margin 合并现象。
• 内联元素：即 display: inline 的元素
  1. 默认从左到右排列，达到最右边才进行换行
  2. 宽度由内部的内联元素的宽度和决定，使用 width 属性无效。
  3. 高度由line-height 属性间接决定（因为受字体影响）， height 属性无效。
  4. margin，padding 默认在 左右方向有效， 上下 margin 失效， 上下 padding 只有视觉效果，不占整体高度。
• 内联块元素： 即 display: inline-block 的元素
  它结合了块级元素和内联元素的特点，既能从左到右排列（像内联元素一样），又能设置 width 和 height 属性（像块级元素一样）。
  
  
  
  注意：
  1. 内联块元素有个不同于内联元素的特性，那就是当一行内容不够时，它不会像内联元素那样直接切割自己，而是整个内联块元素都移动到下方。
  2. 内联元素不能包含块级元素，否则会发生奇怪的现象，即被包含在内联元素的块级元素，直接冲破限制，独立成行。
  3. 块级元素一般不要指定宽度，尤其是 width: 100%，手动设置宽度会让块级元素失去流动的特性性。
  4. 如果一个 div 元素里面内容为 空，那么它默认高度为 0， 而 一个 span 元素里面内容为空，那么它会有一个幽灵节点，会有高度的。