摘要：某日閱讀世界，筆者的一段話鞭撻了我的靈魂。原文是這樣的說到這里，我就忍不住多說兩句。很多其實(shí)工作很多年的前端開發(fā)人員，也可能不知道的屬性值支持?jǐn)?shù)值，更不知道支持負(fù)值，這著實(shí)讓我很意外。只顯示文本的時(shí)候行高是。上集完敬請期待中下集

某日閱讀《CSS世界》，筆者的一段話鞭撻了我的靈魂。原文是這樣的——

“說到這里，我就忍不住多說兩句。很多其實(shí)工作很多年的前端開發(fā)人員，也可能不知道vertical-align的屬性值支持?jǐn)?shù)值，更不知道支持負(fù)值，這著實(shí)讓我很意外“。

......

羞愧啊，滿滿的羞愧??！本人便是那類前端開發(fā)人員啊~

于是自覺關(guān)了小黑屋，發(fā)了一天功，發(fā)憤圖強(qiáng)之后寫下此文，來加深我對vertical-align的認(rèn)識，與大伙共勉！

寫vertical-align樣式的時(shí)候自動匹配出一長串的屬性值，看得我眼花繚亂，怎么有那么多屬性值？該用哪個(gè)？為什么這個(gè)屬性值和另外一個(gè)屬性值的表現(xiàn)形式是一樣的？細(xì)數(shù)一下vertical-align的屬性值，代碼請參考code1-1，表現(xiàn)形式請參考image1-1。

code1-1

編譯結(jié)果如下圖：

vertical-align:middle; // middle指元素的中點(diǎn)在基線加上父元素x字母的一半

圖片高度32px，中點(diǎn)即16px，字母x的高度為8px，一半即4px，middle指元素的中點(diǎn)在基線加上父元素x字母的一半，8px/2-32px/2=-12px。

code2-1

編譯結(jié)果如下圖：

vertical-align:50%; // percentage values的參考系

圖片大小是32px32px[當(dāng)前圖片是300px300px，已統(tǒng)一樣式img{width:32px;}]，字體大小是chrome默認(rèn)的字體大小16px。只顯示文本的時(shí)候行高是22px。

默認(rèn)情況下給圖片設(shè)置vertical-align:50%，既然是百分比，那么就一定有參考系，究竟是以誰為參考系，有三種假設(shè)：

假設(shè)一，如果以圖片的高度為參考系，圖片向上偏移32px*50% = 16px；

假設(shè)二，如果以font-size為參考系，圖片向上偏移16px*50% = 8px；

假設(shè)三，如果以行高line-height為參考系，圖片向上偏移22px*50% = 11px；

不賣關(guān)子了，當(dāng)vertical-align設(shè)置成百分比時(shí)，它的參考系是line-height，所以我后面列出兩個(gè)設(shè)置了line-height的行內(nèi)元素來做比較。

code2-2

編譯結(jié)果如下圖：

vertical-align:top;和vertical-align:text-top;比較，同理bottom和text-bottom也是如此

從設(shè)置了line-height:10px;的兩個(gè)例子就可以明顯看出來top是與父級盒模型的上邊緣對齊重合的，而text-top是與父級元素內(nèi)容的上邊緣對齊重合的。

code2-3-1

編譯結(jié)果如下圖：

code2-3-2

編譯結(jié)果如下圖：

水平位置

vertical-align:top;

vertical-align:middle;

vertical-align:baseline;

vertical-align:bottom;

水平位置從上到下的屬性值依次是：top/middle/baseline/bottom

這句話的意思是說，將top/middle/baseline/bottom看成一條水平線，設(shè)置vertical-align的元素去對齊這根水平線，從下圖可以看出來這根水平線的位置從上到下依次是top/middle/baseline/bottom 。

code2-4-1

編譯結(jié)果如下圖：

這一篇主要介紹vertical-align的屬性，以下為完整源碼，建議大家自行在瀏覽器操作一遍，查看編譯結(jié)果加深理解。

-上集完-

敬請期待中、下集