CSS 行盒子（行高与垂直对齐）

一、行盒内的摆放规则

小贴士：大部分字母以基线（baseline）对齐。

 二、行级盒子高度

    一个包含文字的行盒的高度由行高（line-height）决定，高度只和行高有关系。

三、line box 内的盒子摆放

 由图可知，他们是基于基线（baseline）对齐的。

 解释：① 文字的基线（baseline）是字体的 baseline。

                图片的 baseline 是图片下边缘。

                inline-block 是最后一行文字的 baseline。

            ② 垂直方向上的对齐由 vertical-align 决定。

            ③ 因为 vertical-align 的默认值为 baseline ，

                所以行内的各种盒子，包括文字、图片、inlink block，他们的 baseline 都会和行盒所在的盒子字体的 baseline 对齐。

四、vertical-align 元素的垂直对齐方式

// 默认。元素放置在父元素的基线上。
vertical-align: baseline;

// 长度，百分比（使用 "line-height" 属性的百分比值来排列此元素），基于baseline向上做偏移。可负数。

// 垂直对齐文本的下标。
vertical-align: sub;

// 垂直对齐文本的上标。
vertical-align: super;

// 把元素的顶端与行中最高元素的顶端对齐。
vertical-align: top;

// 把元素的顶端与父元素字体的顶端对齐。
vertical-align: text-top;

// 把此元素放置在父元素的中部。
vertical-align: middle;

// 把元素的顶端与行中最低的元素的顶端对齐。
vertical-align: bottom;

// 把元素的底端与父元素字体的底端对齐。
vertical-align: text-bottom;

// 规定应该从父元素继承 vertical-align 属性的值。
vertical-align: inherit;