大家好，我是IT修真院武漢分院第11期的學員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網css任務5，深度思考中的知識點——如何理解vertical-align與line-height？
一.背景介紹
元素分類 在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素（block）、內聯元素(又叫行內元素inline)和內聯塊狀元素(inline-block)。
二.知識剖析
知識點1：常見的inline、inline-block、block元素
常見元素：
inline：a,span,br,i,em,strong,label,q,var,cite,code
inline-block：img,input
block：p，div,p,h1...h6,ol,ul,dl,table,address,blockquote,form
知識點2：inline、inline-block、block的特性
inline特點:
（1）和其他元素都在一行上，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。
(2)元素的高度、寬度及頂部和底部邊距不可設置.
(3)元素的寬度就是它包含的文字或圖片的寬度，不可改變。
block特點:
（1）每個塊級元素都從新的一行開始，並且其后的元素也另起一行。
(2)元素的高度、寬度、行高以及頂和底邊距都可設置。
(3)元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
inline-block特點:
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼display:inline-block就是將元素設置為內聯塊狀元素。
和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設置。
三，.常見問題
問題一：inline和inline-block元素之間的間距問題
問題二：inline-block元素的如何垂直居中
問題三：利用瀏覽器來查看元素的類型
四，解決方案
問題1：inline和inline-block元素之間的間距問題
就目前而言，個人認為，較好的方法還是設置父容器的font-size為0，子容器重新設置font-size較好。不過，具體的解決方案，還是根據實際情況進行選擇，這種方案可以優先考慮。
問題2：inline-block元素的如何垂直居中
方法1：設置上下padding值相等；
方法2：設置vertical-align:middle;
方法3：設置line-height大於font-size即可實現單行文本垂直居中，無需設置line-height和height值相等
問題3：利用瀏覽器來查看元素的類型
打開谷歌瀏覽器，F12，選中“Element”項，然后選中一個元素，在“Computed”的display中即可看到元素的類型，查看到底是inline元素還是block 元素，亦或是其它類型的元素。
五.編碼實戰
六.拓展思考
問題一：display：inline-block的應用
問題二：應不應該使用inline-block代替float？
問題三：inline-block會脫離文檔流嗎
七.參考文獻
參考一：block，inline和inline-block概念和區別
參考三：深入理解CSS塊級(block)元素和內聯(inline)元素
參考四：詳解CSS display:inline-block的應用
相關視頻 PPT
八，更多討論
1，inline-block布局較float布局而言，有哪些優勢呢？
共性：
①inline-block: 是把一個元素的display設置為塊狀內聯元素，意思就是說，讓一個元素的容器inline展示，並且里面的內容block展示；inline屬性使元素內聯展示，內聯元素設置寬度無效，相鄰的inline元素會在一行顯示不換行，直到本行排滿為止。block的元素始終會獨占一行，呈塊狀顯示，可設置寬高。所以inline-block的元素就是寬高可設置，相鄰的元素會在一行顯示，直到本行排滿，也就是讓元素的容器屬性為block，內容為inline。
②float： 設置元素的浮動為左或者右浮動，當設置元素浮動時，相鄰元素會根據自身大小，排滿一行，如果父容器寬度不夠則會換行。當我們設置了元素的浮動時，這個元素就脫離了文檔流，相鄰元素會呈環繞裝排列。
兩者共同點是都可以實現元素在一行顯示，並且可以自由設置元素大小。
區別：
①inline-block: 水平排列一行，即使元素高度不一，也會以高度最大的元素高度為行高，即使高度小的元素周圍留空，也不回有第二行元素上浮補位。可以設置默認的垂直對齊基線。
②float: 讓元素脫離當前文檔流，呈環繞裝排列，如遇上行有空白，而當前元素大小可以擠進去，這個元素會在上行補位排列。默認是頂部對齊。
2，inline-block會脫離文檔流嗎？
:浮動元素會脫離文檔流，並使得周圍元素環繞這個元素。而inline-block元素仍在文檔流內。因此設置inline-block不需要清除浮動。當然，周圍元素不會環繞這個元素，你也不可能通過清除inline-block就讓一個元素跑到下面去。
3，什么時候使用inline-block，什么時候使用float？
取決於你的設計稿跟解決方法。如果你需要文字環繞容器，那浮動是不二選擇。如果你需要居中對齊元素，inline-block是個好選擇。
最終，這可以歸結為float跟inline-block的兩種屬性作用后的區別，你需要對其作出選擇。
使用inline-block：當你需要控制元素的垂直對齊跟水平排列時，使用inline-block。
使用浮動：當你需要讓元素環繞某一個元素時，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時，使用浮動。
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉發、留言、拍磚~
作者：斌仔_83e7
鏈接：https://www.jianshu.com/p/7a696e99eb09
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。