簡介
今天我打算對css樣式vertical-align的知識點進行一些總結(jié),在我寫具體內(nèi)容之前,我先要說明一下,就是關(guān)于vertical-align的已經(jīng)有很多文章都有所解釋,但是我總覺得他們在某些點上解釋不夠清楚,所以我這次的總結(jié)是基于我看過的一些文章和自我的理解寫的,因此不具有權(quán)威性,甚至有些地方會有些出入,所以只能僅供參考.如果大家有什么好的提議,我希望可以告訴我.
內(nèi)容
vertical-align樣式只對inline級的元素有效,即display為inline,inline-block,inline-table的元素. 所以這個屬性對塊級元素是無效的.
而在介紹該樣式前,我要先向大家介紹兩個至關(guān)重要的概念.
- linebox
linebox是具有一個與該行最頂?shù)脑氐捻敳窟吘墝R的頂部邊緣和一個與該行最底的元素的底部邊緣對齊的底部邊緣的區(qū)域.這句很拗口,下面見圖:
其中紅色的虛線區(qū)域便是linebox包圍的區(qū)域,linebox的高度取決于內(nèi)容.許多個inline級元素一同構(gòu)成一個linebox.
1.其中top對齊方式就是元素的頂部與linebox的頂部對齊(重合).
2.其中middle對齊方式就是元素的頂部和底部的中點與linebox的中點對(重合).
3.其中baseline對齊方式就是元素的頂部與linebox的baseline對齊(重合),但是關(guān)于linebox的baseline的位置并有一個固定的取值,它是會變化的,不過我們可以通過寫一個沒有設(shè)置任何對齊方式的內(nèi)容為x文本來確定linebox的基線,緊貼x的底部的虛線便是linebox的基線.(可見上圖)
4.其中bottom對齊方式就是元素的頂部與linebox的底部對齊(重合).
5.其中sub對齊方式就是元素的baseline低于linebox的baseline.一般常用來做下標,例:
6.其中super對齊方式就是元素的baseline略高于linebox的baseline.一般常用來做上標,例:
- baseline.
上述中提到了linebox的baseline的位置,所以下面便不再重復了,直入主題.
我來說下inline級元素的baseline的位置,inline級元素的baseline的位置分為兩種: - inline元素
在這里你看到三行的文本相鄰排布。行高的頂部和底部是由紅線表示的惠昔，字體的高度是由綠線來表示的家厌，而baseline是由藍線表示的爪喘。在左邊癞志，文本具有一個與字體大小相同的行高，綠色和紅線在上下都重疊了雾叭。在中間夷陋，行高（line-height）是字體大小的兩倍大。在右邊汤纸，行高是字體大旭萌住（font-size）的一半。
inline元素的外邊緣跟自己line-height的頂部和底部邊緣對齊贮泞，如果line-height小于font-size的話也不會改變楞慈。所以，在上面的圖中的行的外邊界是紅線啃擦。
inline元素的baseline字符底部所坐的線囊蓝，就是圖中的藍線。粗略地說令蛉，baseline是在font-size中間下面的一個地方聚霜，看看W3C規(guī)范的詳細定義。
- inline-block元素
inline-block.png
從左到右珠叔，你看到的是一個擁有流內(nèi)容（一個“c”）的inline-block元素蝎宇，一個擁有流內(nèi)容且overflow: hidden;的inline-block元素和一個沒有流內(nèi)容的inline-block元素（但內(nèi)容區(qū)域有一個高度）。margin的邊界由紅線表示祷安，以及黃色的border姥芥，綠色的padding和藍色的內(nèi)容區(qū)域，藍線是每個inline-block元素的baseline汇鞭。
inline-block元素的外邊緣是其margin-box的頂部和底部邊緣凉唐，即圖中的紅線。
inline-block的baseline取決于元素是否具有流內(nèi)容：
在流內(nèi)容的情況下霍骄，inline-block元素的baseline是正常流的最后一個內(nèi)容元素的baseline（左邊的例子）台囱。對于這最后一個元素，它的baseline位置由它自己的規(guī)則決定腕巡。
在流內(nèi)容玄坦，但具有overflow:hidden的情況下，baseline是margin-box的底邊緣（中間的例子）绘沉，也相當于inline-block元素的底邊緣煎楣。
如果沒有流內(nèi)容，則跟上一個一樣车伞，baseline位于margin-box的底邊緣（右邊的例子）择懂。
- line box baseline的移動
這是最難理解的地方了,我到現(xiàn)在還是一知半解的.所以只能引用原文了
這里有一個使用vertical-align常見的盲點：line box baseline的位置會被行內(nèi)所有元素所影響。讓我們假設(shè)這種情況另玖，一個元素以使得line box baseline必須移動的方式進行對齊困曙。由于大多數(shù)垂直對齊方式（除了頂部和底部）與baseline相關(guān)表伦，這會導致該行中的所有其他元素移動。
一些例子：
如果有一個很高的元素占據(jù)了整行的高度慷丽，事實上它也決定了整行高度蹦哼，那么vertical-align對它就沒有效果，上下都沒有空間讓它移動要糊，所以line box的baseline為了滿足對齊關(guān)系必須移動纲熏。在下圖中，短方塊設(shè)置了vertical-align: baseline;锄俄，左例中高方塊的垂直對齊方式是text-bottom局劲，而在右邊中是text-top。你可以看到baseline與短方塊始終在一起奶赠。
1.png
當用vertical-align的其他值來對齊高方塊時也有相似的表現(xiàn)鱼填。
然而甚至設(shè)置vertical-align為bottom（左圖）和top（右圖）也會使baseline移動。這十分奇怪毅戈，因為這應該與baseline并無關(guān)系苹丸。
2.png
將一行內(nèi)兩個較大的元素垂直對齊會使得baseline移動來同時滿足兩個的對齊方式，并且也會調(diào)整line box的高度（左圖）竹祷。再添加一個元素谈跛，如果沒有因為其對齊方式而超越原有l(wèi)ine box的邊緣，則不影響line box的高度和baseline的位置（中圖）塑陵。如果它超出了原來line box的邊緣感憾，line box的高度和baseline會再次調(diào)整，在這種情況下令花，我們的前兩個方塊往下挪了（右圖）阻桅。
3.png
總結(jié)
本來是打算用自己的語言來組織vertical-algin的核心難點,但是寫的時候有些卡殼了......,(看來我還沒理解透徹.)…（⊙＿⊙；）…..所以只能引用原文的內(nèi)容,還請多多包涵.還有, 我覺得其中的關(guān)鍵就是找到元素的baseline位置,和linebox的baseline位置,只要確定好這兩個因素,那么一切的vertical-algin問題便可迎刃而解了.
最后這里獻上原文章的鏈接Vertical-Align: All You Need To Know(譯)
