[css奇思妙想神奇的X字符]css中奇思妙想的字母’x’在角色和故事

一、不起眼的字母’x’

首先，我们这里的字母'x'就是26个英文字母a,b,c,...中的x.

由于自身形态的一些特殊性，因此，这个小小的不起眼的字母担当大任，在CSS世界中扮演了一个重要的角色。

有人可能的第一反应是：“我知道，可以模拟关闭按钮的那个叉叉效果！”

这位同学思维很活跃，但是呢，本文所要介绍的字母'x'和CSS的关系不是奇巧淫技，而是正统的术语上的紧密联系。

二、字母’x’与CSS中的基线

在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。例如，line-height行高的定义就是两基线的间距；vertical-align的默认值就是基线；其他中线顶线一类的定义也离不开基线；基线甚至衍生出了：

1. “alphabetic” baseline: “字母”基线 – 英文
2. “hanging” baseline: “悬挂”基线 – 印度文
3. “ideographic” baseline: “表意”基线 – 中文

然后就华丽丽地对齐了，完全没有vertical-align出场的机会。

您可以狠狠地点击这里：ex高度图标和字符天然对齐Demo

会发现，字体，文字大小全变化，对齐依旧良好：

虽然使用ex做高度实现天然垂直对齐看上去很巧妙，但是，也是有局限的，就是如果图标背景的高度超过1ex，我们就只能再请vertical-align出马了……

对了，还有一点。由于IE6-IE7对内联模型的解释有问题，因此，各类vertical-align在这些浏览器下都是有问题，包括这里的ex天然基线对齐，需要特别处理下。