新手前端趣學：我腦中飄來飄去的CSS魔幻屬性

分享前還是先分享自己的web前端學習交流群：614315657群內不定時分享乾貨， 包括2017最新的web前端企業案例學習資料和零基礎入門教程， 歡迎初學和進階中的小夥伴入群學習交流

這是我在segmentfault上看到的一個問題， 曾經自己遇到過， 所以就很熱情洋溢的去回答了一下， 難道遇到個自己會的， 示例代碼是這樣的：

CSS:

HTML:

大概就是這姿態， 其實文和圖有點不對應， 代碼中第一個模組他只寫了一個“1”,我為了現象更加明顯，

且好說明為什麼， 就打了一大段文字， 現在我們來說說為什麼。 先來一張圖， 看懂vertical-align的幾個特點,順便帶上圖片出處， 文章講得還可以， 理解這張圖片， 後邊就好理解了。

inline-block的vertical-align 特點默許是baseline對齊（深入理解的送福利）， 也就是英文文字小寫字母a,b,c這類字母底部的那條線，

因為這些是外國人發明的， 所以以英文字母才有針對性。 inline-block擁有vertical-align特點， 其默許是基線對齊的， 所以這三個inline-box需要基線對齊， 而其基準線就是正常流中最終一個line box的基線,如果這個元素是空的， 沒有內容， 那麼這個基線就是最終這個元素的margin-bottom線；

如果這個元素不為空， 那麼這個元素的基線就是元素裡面內容最終一行文字的基線；所以我們一個一個來套， 發現這三個li元素在一行， 第一個有文字， 其基線為文字底部；最終一個沒有文字， 其基線為margin-bottom線,考試要考， 劃重點， 可以自己為元素設置margin-bottom試試,這就會造成第一個和二， 三個錯行的感覺， 其實他兩是為了基線對齊， 所以多敲幾十個文字就能顯著看出其不同。 所以最簡單的解決方案就是為li增加vertical-align: 特點不為baseline， 氣不氣， 改變其縱向的對齊方式的默許特點;為啥非弄個折騰人勒。

寫在最後：

篇幅有限， 今天先分享這麼多， 如果大家喜歡的話我會再更新， 專注學習web前端技術的小夥伴可以進群（614315657）一起交流學習， 群裡還有大量學習資料可供大家自行下載參看，

歡迎大家一起來交流討論。