一、不起眼的字母’x’
首先，我們這裏的字母'x'就是26個英文字母a,b,c,...中的x.
由於自身形態的一些特殊性，因此，這個小小的不起眼的字母擔當大任，在CSS世界中扮演了一個重要的角色。
有人可能的第一反應是：“我知道，可以模擬關閉按鈕的那個叉叉效果！”
這位同學思維很活躍，但是呢，本文所要介紹的字母'x'和CSS的關係不是奇巧淫技，而是正統的術語上的緊密聯繫。
二、字母’x’與CSS中的基線
在各種內聯相關模型中，凡是涉及到垂直方向的排版或者對齊的，都離不開最最基本的基線(baseline)。例如，line-height行高的定義就是兩基線的間距；vertical-align的默認值就是基線；其他中線頂線一類的定義也離不開基線；基線甚至衍生出了：
- “alphabetic” baseline: “字母”基線 – 英文
- “hanging” baseline: “懸掛”基線 – 印度文
- “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: This identifies a baseline that is offset from the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The position of this baseline may be obtained from the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be approximated by the “central” baseline.
大意就是：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, 有些不吉利啊。不過反而來講，可能是對魚兒說的！
有道理，寫完就去釣會兒魚，我有大頭，下雨不愁！
本文爲原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址：http://www.zhangxinxu.com/wordpress/?p=4848
