記錄學習難點之vertical-align!!!垂直居中（實際上是對齊）的含義了解
學霸應用指路：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/ vertical-align和line-height的差別
1.适用範圍：這個元素隻對行内元素或者行内塊元素有效，是以浮動元素定位元素display:block通通滾一邊！
2.我們來看官方定義：
該屬性定義：
行内元素的基線（甚至中線底線頂線什麼的但是預設是基線）相對于該元素所在行的基線（這個道理同上）的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設定單元格框中的單元格内容的對齊方式。非單元格用display:table-cell也行。
3.屬性線分布圖—盜的一個部落客的不好意思⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
4.定義解釋
什麼鬼什麼鬼？！說什麼呢？讓我先解釋一下後邊的部分：
在表單元格中，這個屬性會設定單元格框中的單元格内容的對齊方式。
–就是單元格裡什麼樣單元格的文字就是什麼樣！vertical-align：middle就是垂直居中，bottom就是文字靠底部。其他的以此類推！
接下來解釋重點部分！敲黑闆！我當初看了半天也沒看懂！
行内元素的基線（甚至中線底線頂線什麼的但是預設是基線）相對于該元素所在行的基線（這個道理同上）的垂直對齊。
這句話的意思就是：重點重點！
如果你的元素使用了vertical-align:middle!那麼！你這個元素的中線就會和你這個元素的行的基線線對齊！！！
注意：元素所在行的基線即line box 的基線等于這一行中沒有經過任何人為對齊設定的文本的基線。
注意：但是top的意思就是和行内最高的元素頂端對齊，bottom指的是與行内最低的元素底端對齊。
接下來我們設定兩個行内塊盒子100*200，第二個的vertical-align設定為middle,其他的預設
注意：一個 inline-block 元素，如果裡面沒有内聯元素，或者overflow不是visible，則該元素的基線就是其 margin 底邊緣;否則其基線就是元素裡面最後一行内聯元素的基線。