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。

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

这段代码的效果如下：

这么看起来就是一段普通的文本，但这种段代码中就藏种那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大小相关。一般选择文本后，有背景颜色的就是内容区了。如下图：