css - 垂直對齊
非原生行內塊
為了方便敘述，我們把轉換為行內塊的元素稱為非原生行內塊元素
單行/多行元素
在學習垂直對齊前，需要先把在一行上顯示的元素分出兩個概念，一個是單行元素，另一個是多行元素。單行元素有：input、button、span、a等，多行元素有：非原生的行內塊、textarea、img等。而我們知道元素的頂線就是其頂部、底線是其底部，中線是其中部，但其基線在css中卻有奇怪的解釋。
單行元素的基線
1.單行輸入框input：基線=在輸入框輸入的文本的基線
2.按鈕（input按鈕或button）：基線=按鈕文本的基線
3.span等行內元素：基線=文本的基線
4.純文本：基線=文本的基線
多行元素的基線
1.圖片：基線=底線=底部
1.多行輸入框textarea：基線=底線＝底部
2.沒有包含內容的非原生行內塊元素（如div、span）：基線=底線＝底部，
3.包含了內容的非原生行內塊元素（如div、span）：基線=其包含的最后一行的內容的基線，如果你希望它的基線是自身的底線，可以設其overflow:hidden
從以上我們可以得知，單行元素的基線是其文本的基線，而多行元素的基線是其底線，而非原生行內塊如果包含內容，則其基線是其最后一行內容的基線
line box的四條線
一行就是一個line box，而一行上多個並列的元素，每個元素都稱為inline box。line box也有四條線：頂線=頂部，中線=隱形x的中線，基線=隱形x的底線（隱形x的基線=其底線），底線=一行上最高的那個inline box底線。
隱形x
隱形x的概念屬於偽造，但它有助於理解vertical-align的對齊模式。
假如有一個高500px的div，則它可能具有多行或只有一行，這取決於設計圖，無論如何，最低它也具有一行。而每一個行都是一個line box，每個line box都有一個隱形x。而vertical-align的對齊方式都是以line box的四條線進行垂直偏移的，所以先暫且記住line box的四條線和隱形x的概念才能理解后面的講解
隱形的x不由任何子html標簽包含。你也可以手動向line box插入一個純文字小寫x，用這個x來試驗vertical-align的各個值的效果。
vertical-align的應用方式
vertical-align有一些非常迷惑人的特點，所以很多人在使用這個屬性的時候會發現超多的意外情況。比如你為一行上的img設置了vertical-align：middle，你會發現這個設置對其它在一行上的元素居然也有效。實際上你只需要記住，vertical-align:baseline是每個元素都具備的默認屬性，如果你只是為一行上的某一個元素設置了非baseline的vertical-align，那么只有這一個元素會應用這個新的垂直對齊特性，而一行上的其他元素應用的依然是baseline！如果這一點沒搞清楚，你會被迷惑得抓狂。請記住，默認baseline！你可以手動覆蓋這個屬性值，但只有明確設置了新特性值的元素才會應用新的垂直對齊方式，其它元素並不變化，依然是baseline。
vertical-align屬性值
取值：baseline 默認 | px | % | top | middle | bottom | super | sub | text-top | text-bottom
設置給：inline box
繼承性：無
取值：baseline
baseline：以line box的基線為參照與自身的基線對齊
取值：px | em | rem ……
px/em/rem：以line box的基線為參照進行上下偏移，可以把基線看做0刻度線，向上偏移取正數，向下偏移取負數
取值：%
%：以line box的基線為參照進行上下偏移，將當前元素的行高*%，正百分比向上偏移，負百分比向下偏移
取值：top（頂線） | bottom（底線）| middle（中線）
top/bottom/middle：top：以line box的頂線為參照與自身的頂線對齊（line box的頂部）、middle：以隱形x的中線為參照與自身的中線對齊（當存在行高時，隱形x的中線會下沉到line box的中線的下面，行高越高，下沉越明顯，這個情況被稱為字符下沉）、bottom：以line box的底線為參照與自身的底線對齊（line box的底線是在它里面最高的那個inline box的底線）
下圖中的黃色div設置了vertical-align:top，黃色div以line box的頂線與自身的頂線對齊
下圖中的黃色div設置了vertical-align:middle，黃色div以隱形x的中線與自身的中線對齊
下圖中的黃色div設置了vertical-align:bottom，一行黃色div最高，它的底線就是父元素的底線，它相對於父元素的底線對齊。
下圖中的一行所有元素都設置了底線對齊，一行最高的是黃色div，其它元素以它的底線與它們自身的底線對齊
取值：super（上標） | sub（下標）
super/sub：以line box的基線為參照進行上標或下標
作用：類似於html的<sub>、<sup>
取值：text-top （所有文本的頂部）| text-bottom（所有文本的底部）
text-top/text-bottom：以自身的頂底部與一行上的文本的頂底部作為參照進行對齊
垂直對齊相關知識的歸納
關於vertical-align的垂直對齊需要特別注意，所謂vertical-align指的就是容器里有多個inline box（哪怕盒子里只有一個inline box，該inline box所在行都有一個line box的基線，都可以設置vertical-align），這些box需要垂直對齊時，它們都是相對於line box的四條線為基准進行上下偏移。總結以上的各個屬性值可以得出：
1.baseline：以自身的基線與line box的基線進行對齊
2.px、em、rem、%、sub、super：以line box的基線為參照進行上下偏移
3.top、middle、bottom：以自身的頂線、中線、底線與line box的頂線、中線、底線對齊。
4.text-top、text-bottom：以自身的頂線或底線與一行上的文本的頂部與底部進行對齊
非原生行內塊元素的垂直對齊
這里所說的非原生行內塊指的是被轉換為行內塊的div、span等容器元素，它們比較特殊，如果它們沒有包含任何內容，則它們的基線就是它們自身的底線，如果它們包含了內容，則它們的基線是它們包含的最后一行內容的基線。
以下設置了兩個行內塊div元素，它們沒有包含任何內容，所以它們的基線就是自己的底線，默認是baseline對齊，效果如圖所示
現在往第二個div里插入文本后，發現效果如下圖。這是因為第二個div的基線是它包含的最后一行內容的基線。
