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

一、不起眼的字母’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: “表意”基線 – 中文

那大家知道基線又是如何定義的嗎？

哈，基線的定義就離不開本文的男主角 'x' .

字母x的下邊緣(線)就是我們的基線。

對，是字母 x , 不是字母 s 之類下面有尾巴的字母。

三、字母’x’與CSS中的x-height

字母 'x' 與CSS的故事遠不止基線這么簡單。CSS中有一個概念叫做 "x-height" , 指的是字母 'x' 的高度。

有人可能會疑問了，“一個字母的高度跟我CSS布局排版有半毛錢關系啊？”

實際上關系可大了。

首先，需要了解下 "x-height" 的含義，通俗講， "x-height" 就是指的小寫字母 'x' 的高度；術語描述就是基線和等分線[mean line](也稱作中線[midline])之間的距離。

維基上有這么個示意圖：

"x-height" 的示意范圍一目了然，了然于心，于心不忍，不忍直視。

上面圖中還出現了其他的名詞，這里簡單說下我的理解：

• ascender height: 上下線高度
• cap height: 大寫字母高度
• median: 中線
• descender height: 下行線高度

然后，CSS中有些屬性值的定義就和這個 "x-height" 的有關，最典型的代表就是： vertical-align: middle .

這里的 middle 是中間的意思，注意，跟上面的 median 中線不是一個意思。規范中對垂直對齊的 middle 這么解釋的：

大意就是： middle 指的是基線往上1/2 "x-height" 高度。我們可以近似腦補成字母 x 交叉點那個位置。

有此可見， vertical-align: middle 并不是絕對的垂直居中對齊，我們平常看到的 middle 效果只是一種近似的效果。原因很簡單，因為不同的字體，其在行內盒子中的位置是不一樣的，比方說’微軟雅黑’就是一個字符下沉比較明顯的字體，所有字符的位置相比其他字體要偏下一點。要是 vertical-align: middle 是相對容器中分線對齊，呵呵，你會發現圖標和文字不在一條線上，而相對于字符 x 的中心位置對齊，我們肉眼看上去就好像和文字居中對齊了。

四、字母’x’與CSS中ex

字母 'x' 衍生出了 "x-height" 概念，并在這個基礎上深耕細作，進一步衍生出了 ex , 注意，這里的 ex 不是前任的意思，而是地地道道CSS中的一個尺寸單位。

大家可能都聽過用過 em , px 甚至用過 rem , 說不定對連IE6都老早支持的 ex 單位卻很陌生。

ex 是CSS中的一個相對單位，指的的是小寫字母 x 的高度，沒錯，就是指 "x-height" .

那這個單位有什么實際用途呢？我只能呵呵，貌似沒啥實際用途，否則也不會這么不為人所知。

是這樣嗎？

五、單位ex的價值與實用性

存在必有價值。我們細細思考字母 "x" 在CSS世界中扮演的角色，就會發現 ex 的價值所在。

首先，需要明確一點，雖然說尺寸單位的作用是限定元素的尺寸，但是，由于字母 "x" 受字體和環境影響大，參考性太低，因此 ex 顯然不太適合做這個。那問題來了， ex 連自己的本職工作都做不好，難道還指望其副業開掛？

沒錯， ex 的價值就在其副業上——不受字體字號影響的內聯元素的垂直居中對齊效果。

我們都知道，內聯元素默認是基線對齊的，而基線就是 x 的底部，而 1ex 就是一個 x 的高度。設想下，假如我們圖標高度就是 1ex , 同時背景圖片居中，豈不是圖標和文字天然垂直居中，而且，完全不受字體和字號的影響。因為 ex 就是一個相對于字體字號的單位。

文字表述蒼白，我們看個例子，下圖所示的文字后面跟個小三角圖標的效果是非常常見的：

現在，要讓該圖標和文字中間位置排整齊，你是如何實現？

尺寸啪啪，然后 vertical-align: middle ?

這樣雖然也有效果，但是，實際上啰嗦了，借助 ex 單位，我們直接借助默認的 baseline 對齊就可以實現我們的效果！

如下CSS代碼：

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

然后就華麗麗地對齊了，完全沒有 vertical-align 出場的機會。

您可以狠狠地點擊這里： ex高度圖標和字符天然對齊Demo

會發現，字體，文字大小全變化，對齊依舊良好：

雖然使用 ex 做高度實現天然垂直對齊看上去很巧妙，但是，也是有局限的，就是如果圖標背景的高度超過 1ex ，我們就只能再請 vertical-align 出馬了……

對了，還有一點。由于IE6-IE7對內聯模型的解釋有問題，因此，各類 vertical-align 在這些瀏覽器下都是有問題，包括這里的 ex 天然基線對齊，需要特別處理下。

六、結束語

外面的雨嘩啦啦的下了一整天，我的釣魚大計啊，就此泡湯。

要是現在在老家就好了，溝溝渠渠里一定都是從魚塘跑出來的魚，下水摸魚捕魚不知有多快活。

不過話說，這陰雨天適合釣鯰魚，要不待會兒冒雨出去碰碰運氣？

話說本文的 id 是4848, 有些不吉利啊。不過反而來講，可能是對魚兒說的！

有道理，寫完就去釣會兒魚，我有大頭，下雨不愁！

（本篇完）