第5章 内联元素与流

字母x

字母x与CSS世界的基线

字母x的下边缘（线）就是基线。

字母x与CSS中的x-height

x-height指的是字母x的高度。

vertical-align:middle;的middle指的是基线网上1/2 x-height高度。

字母x与CSS中的ex

ex是CSS中的一个相对单位，指的是小写字母x的高度，即x-height。

ex的作用是不受字体和字号影响的内联元素的垂直居中对齐效果。

内联元素默认是基线对齐，而基线就是x的底部，而1ex就是一个x的高度。

文字与小三角图标

See the Pen 文字与小三角图标 by whjin (@whjin) on CodePen.

内联元素的基石line-height

内联元素的高度之本——line-height

**div高度是行高line-height决定的，而非文字。**对于非替换元素的纯内联元素，其可视高度完全由line-height决定。

行距=line-height-font-size。em是一个相对font-size大小的CSS单位，因此1em等于当前一个font-size大小。

See the Pen 半行间距 by whjin (@whjin) on CodePen.

line-height不会影响替换元素。图片为内联元素，会构成一个“行框盒子”，而在HTML5下，每一个“行框盒子”的前面都是一个宽度为0的“幽灵空白节点”，其内联特性表现和普通字符完全一样。

对于块级元素，line-height对其本身没有任何作用，改变line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联元素占据的高度实现。

为什么line-height可以让内联元素“垂直居中”

行高实现多行文本或图片等替换元素的垂直居中效果

See the Pen 行高与多行文字垂直居中 by whjin (@whjin) on CodePen.

深入line-height的各类属性值

line-height的默认值是normal，还支持数值、百分比值以及长度值。

在实际开发中，需要对line-height的默认值进行重置：

1. 数值。计算方法line-height=1.5*font-size
2. 百分比值。line-height=150%*font-size
3. 长度值。line-height=1.5*font-size

• 制作一个图文内容比较多的网站，使用数值作为单位，line-height值可以设置在1.6~1.8。
• 偏重布局结构的网站，使用长度值或数值都可以，line-height值可以设置在20px。

内联元素line-height的“大值特性”

无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定，称之为内联元素line-height的“大值特性”

每个内联盒子外层都有一个看不见的行框盒子，在每个行框盒子前面都有一个宽度为0的具有该元素的字体和行高属性的看不见的幽灵空白节点。

line-height的好朋友vertical-align

凡是line-height起作用的地方vertical-align也一定起作用。

vertical-align家族基本认识

vertical-align属性值分为以下4类：

1. 线类。baseline默认值、top、middle、bottom
2. 文本类。text-top、text-bottom
3. 上标下标类。sub、super
4. 数值百分比类。20px、2em、20%等，正值往上偏移，负值往下偏移。

vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐。

See the Pen vertical-align数值-文字与图标垂直居中 by whjin (@whjin) on CodePen.

margin/padding是相对于宽度计算，line-height是相对于font-size计算，vertical-align属性的百分比值是相对于line-height计算。

vertical-align作用前提

vertical-align作用前提条件：只能应用于内联元素以及display值为table-cell的元素。也就是只能作用在display计算值为inline、inline-block、inline-table、inline-cell的元素上。

块级元素不支持。浮动元素和绝对定位会让元素块状化，从而导致vertical-align不起作用。

vertical-align和line-height之间的关系

See the Pen 解决内联元素“幽灵空白节点” by whjin (@whjin) on CodePen.

解决图片底部留有间隙的问题

消除间隙的方法，从幽灵空白节点、line-height和vertical-align入手：

1. 图片块状化。
2. **容器line-height足够小。**比如容器设置line-height:0;
3. 容器font-size足够小。
4. 图片设置其他vertical-align属性值。间隙产生的原因之一就是基线对齐，所以设置vertical-align的值为top/bottom/middle其中一个。

深入理解vertical-align线性类属性值

1. inline-block与baseline

一个inline-block元素，如果里面没有内联元素，或者overflow:visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。

See the Pen inline-block与baseline by whjin (@whjin) on CodePen.

没有内联元素，基线就是容器的margin下边缘，即下边框下面的位置；有内联元素，基线就是字符的下边缘。

字符实际占据的高度是由line-height决定，当line-height变为0时，字符占据的高度也是0，此时高度的起始位置就变成字符内容区域的垂直中心位置。

解决间隙问题的方法

1. 改变占位<i>元素的基线；
2. 改造幽灵空白节点的基线位置；
3. 使用其他vertical-align对齐方式。

改造幽灵空白节点的基线位置可以使用font-size，当字体足够小时（设为0），基线和中线会重合在一起。

基于20px图标对齐的处理技巧

1. 图标高度和当前行高都是20px。
2. 图标标签里面永远有字符。借助:before和:after伪元素生成一个空格字符。
3. 图标CSS不适用overflow:hidden;保证基线为里面字符的基线，但是需要让里面潜在的字符不可见。

See the Pen 图标文字对齐 by whjin (@whjin) on CodePen.

2. vertical-align:top/bottom

• 内联元素：元素底部和当前行框盒子的顶部对齐。
• table-cell元素：元素底padding边缘和表格行的顶部对齐。

3. vertical-align:middle与近似垂直居中

• 内联元素：元素的垂直中心点和行框盒子相对于外面的表格行居中对齐。
• table-cell元素：单元格填充盒子相对于外面的表格行居中对齐。

深入理解vertical-align文本类属性值

• vertical-align:text-top：盒子的顶部和父级内容区域的顶部对齐。
• vertical-align:text-bottom：盒子的底部和父级内容区域的底部对齐。

1. 文本类属性值的垂直对齐与左右文字大小和高度都没有关系，而所有线性类属性值的定位都会受到兄弟内联元素的影响。
2. 文本类属性值的垂直对齐可以像素级精确控制。如果是图文对齐，可以通过改变父元素的font-size大小精确控制对齐位置；如果是文字之间对齐，可以通过改变文字的line-height，也就是改变元素的高度（上下边缘位置）精确控制对齐位置。

简单了解深入理解vertical-align线性类属性值上标下标类属性值

vertical-align线性类属性值上标下标类属性值指的是sub和super两个值。

• vertical-align:super：提高盒子的基线到父级合适的上标基线位置。
• vertical-align:sub：降低盒子的基线到父级合适的下标基线位置。

无处不在的vertical-align

基于vertical-align属性的水平垂直居中弹框

使用纯CSS实现大小不固定的弹框永远居中的效果，如果伪元素换成普通元素，兼容IE7。

See the Pen 水平垂直居中弹框 by whjin (@whjin) on CodePen.

**vertical-align:middle**定义是元素的中线和字符x中心点对齐。

1. font-size设置为0，x中心点位置是.container的上边缘，高度100%宽度0的伪元素和这个中心点对齐。CSS中默认是左上方排列对齐，所以这个伪元素和原本在容器上边缘的x中心点一起往下移动了半个容器高度，就是此时x中心点在 容器的垂直中心线上。

2. 弹框元素.dialog设置vertical-align:middle;。根据定义，弹框的垂直中心位置和x中心点位置对齐，此时x中心点在容器的垂直中心位置，.dialog元素和容器垂直中心位置对齐，从而实现垂直居中效果。