《CSS世界》读书笔记：字母x

本文内容摘自 张鑫旭的《CSS世界》，外加一些自己的理解。在此仅作学习记录，无商业用途。

1. 字母x与基线

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

2. x-height

小写字母x的高度即x-height。

• vertical-align:middle; 中的middle与图中的median不是一个意思，middle是指基线往上1/2 x-height的地方。近似理解为字母x交叉点的地方。
• 由于不同的字体相对于基线所在的位置不同，有的可能会下沉一些，有的可能会上浮一些，因此，vertical-align:middle;呈现出来的居中效果是一种近似居中。
• 对于内联元素的垂直居中应该是对文字，而非居外部的块级容器所言。
• 内联元素默认是基线对齐的。

3. ex的运用

ex单位指的是小写字母x的高度。使用它可以实现图标的近似居中效果。

可以看到图标的高度与x的高度相同，图片处于居中时，即位于x的交叉处，实现近似居中，且即便字体放大，x字母也会跟着放大，图标就能一直保留在x交叉处的位置。

演示地址

4. 元素的对齐

• 内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。

参考地址

字母’x’在CSS世界中的角色和故事