CSS中的Line Box

       平常只知道到CSS的盒模型，即Block Box。最近有使用到CSS的 line-height 和 vertical-align 这两个属性，但使用起来特别的不顺利，所以就仔细的学习了，这才知道这其中有一部分原因是因为有一个时常接触到，但我并不知道的东西在作怪。就是Line Box 及其相关的一些 Box。我就把它们给总结了下。

       在Line Box的相关概念中有，有4种Box。即 containing box、line boxes、inline boxes、content area。下面我们来看段简单的代码，通过它们来分别来说说这4种box。

    你好，这是一段测试代码，
    我用这段代码
    来展示
    line boxes 相关的 4种 boxes。

这段代码的效果如下：

这么看起来就是一段普通的文本，但这种段代码中就藏种那4种box。下面听我细细讲来。

包含框（containing box）

每一个block都算containing box，它包含 line boxes，line boxes的高度垂直堆叠形成了 containing box的高度，如例中div的高度。

行框（line boxes）

块内的内容渲染的每一行，都可以看成是一个行框，也可以说，每一行都是一个行框。如下：

line boxes的行数，由block的宽度及内容决定，当然是在不限制高度的情况下。

一行内有多个行内框，一个一个的inline boxes组成了line boxes，行框是包含一行内行内框最高点和最低点。

它的高度，由行内最大line-height决定。

行内框（inline boxes）

inline boxes不会让内容成块显示，而是排成一行。inline boxes一般有两种，

匿名文本（匿名 inline boxes）：在块元素（无论是 block 或 inline-block）中没有被 内联元素（即 inline 元素）包含的文本，都为匿名文本。即匿名 inline boxes。

而内联/行内元素也是一个 inline boxes。如下图（有4个 inline boxes）：

 

行内容区（content area）

content area 是一种围绕文字看不见的box。content area的大小与font-size大小相关。一般选择文本后，有背景颜色的就是内容区了。如下图：