大家好，我是IT修真院武漢分院第11期的學(xué)員，一枚正直純潔善良的前端程序員，今天給大家分享一下，修真院官網(wǎng)css任務(wù)5，深度思考中的知識(shí)點(diǎn)——如何理解vertical-align與line-height？
一.背景介紹
元素分類 在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素（block）、內(nèi)聯(lián)元素(又叫行內(nèi)元素inline)和內(nèi)聯(lián)塊狀元素(inline-block)。
二.知識(shí)剖析
? ? ? ? ? ?知識(shí)點(diǎn)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
? ? ? ? ? 知識(shí)點(diǎn)2：inline、inline-block、block的特性
inline特點(diǎn):
（1）和其他元素都在一行上，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
(2)元素的高度、寬度及頂部和底部邊距不可設(shè)置.
(3)元素的寬度就是它包含的文字或圖片的寬度，不可改變。
block特點(diǎn):
（1）每個(gè)塊級元素都從新的一行開始，并且其后的元素也另起一行。
(2)元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
(3)元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。
inline-block特點(diǎn):
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。
和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
三，.常見問題
問題一：inline和inline-block元素之間的間距問題
問題二：inline-block元素的如何垂直居中
問題三：利用瀏覽器來查看元素的類型
四，解決方案
問題1：inline和inline-block元素之間的間距問題
就目前而言，個(gè)人認(rèn)為，較好的方法還是設(shè)置父容器的font-size為0，子容器重新設(shè)置font-size較好。不過，具體的解決方案，還是根據(jù)實(shí)際情況進(jìn)行選擇，這種方案可以優(yōu)先考慮。
問題2：inline-block元素的如何垂直居中
方法1：設(shè)置上下padding值相等；
方法2：設(shè)置vertical-align:middle;
方法3：設(shè)置line-height大于font-size即可實(shí)現(xiàn)單行文本垂直居中，無需設(shè)置line-height和height值相等
問題3：利用瀏覽器來查看元素的類型
打開谷歌瀏覽器，F(xiàn)12，選中“Element”項(xiàng)，然后選中一個(gè)元素，在“Computed”的display中即可看到元素的類型，查看到底是inline元素還是block 元素，亦或是其它類型的元素。
五.編碼實(shí)戰(zhàn)
六.拓展思考
問題一：display：inline-block的應(yīng)用
問題二：應(yīng)不應(yīng)該使用inline-block代替float？
問題三：inline-block會(huì)脫離文檔流嗎
七.參考文獻(xiàn)
參考一：block，inline和inline-block概念和區(qū)別
參考二：前端開發(fā)學(xué)習(xí)筆記（七）- Css 元素分類
參考三：深入理解CSS塊級(block)元素和內(nèi)聯(lián)(inline)元素
參考四：詳解CSS display:inline-block的應(yīng)用
相關(guān)視頻? PPT
八，更多討論
1，inline-block布局較float布局而言，有哪些優(yōu)勢呢？
共性：
①inline-block: 是把一個(gè)元素的display設(shè)置為塊狀內(nèi)聯(lián)元素，意思就是說，讓一個(gè)元素的容器inline展示，并且里面的內(nèi)容block展示；inline屬性使元素內(nèi)聯(lián)展示，內(nèi)聯(lián)元素設(shè)置寬度無效，相鄰的inline元素會(huì)在一行顯示不換行，直到本行排滿為止。block的元素始終會(huì)獨(dú)占一行，呈塊狀顯示，可設(shè)置寬高。所以inline-block的元素就是寬高可設(shè)置，相鄰的元素會(huì)在一行顯示，直到本行排滿，也就是讓元素的容器屬性為block，內(nèi)容為inline。
②float： 設(shè)置元素的浮動(dòng)為左或者右浮動(dòng)，當(dāng)設(shè)置元素浮動(dòng)時(shí)，相鄰元素會(huì)根據(jù)自身大小，排滿一行，如果父容器寬度不夠則會(huì)換行。當(dāng)我們設(shè)置了元素的浮動(dòng)時(shí)，這個(gè)元素就脫離了文檔流，相鄰元素會(huì)呈環(huán)繞裝排列。
兩者共同點(diǎn)是都可以實(shí)現(xiàn)元素在一行顯示，并且可以自由設(shè)置元素大小。
區(qū)別：
①inline-block: 水平排列一行，即使元素高度不一，也會(huì)以高度最大的元素高度為行高，即使高度小的元素周圍留空，也不回有第二行元素上浮補(bǔ)位。可以設(shè)置默認(rèn)的垂直對齊基線。
②float: 讓元素脫離當(dāng)前文檔流，呈環(huán)繞裝排列，如遇上行有空白，而當(dāng)前元素大小可以擠進(jìn)去，這個(gè)元素會(huì)在上行補(bǔ)位排列。默認(rèn)是頂部對齊。
2，inline-block會(huì)脫離文檔流嗎？
:浮動(dòng)元素會(huì)脫離文檔流，并使得周圍元素環(huán)繞這個(gè)元素。而inline-block元素仍在文檔流內(nèi)。因此設(shè)置inline-block不需要清除浮動(dòng)。當(dāng)然，周圍元素不會(huì)環(huán)繞這個(gè)元素，你也不可能通過清除inline-block就讓一個(gè)元素跑到下面去。
3，什么時(shí)候使用inline-block，什么時(shí)候使用float？
取決于你的設(shè)計(jì)稿跟解決方法。如果你需要文字環(huán)繞容器，那浮動(dòng)是不二選擇。如果你需要居中對齊元素，inline-block是個(gè)好選擇。
最終，這可以歸結(jié)為float跟inline-block的兩種屬性作用后的區(qū)別，你需要對其作出選擇。
使用inline-block：當(dāng)你需要控制元素的垂直對齊跟水平排列時(shí)，使用inline-block。
使用浮動(dòng)：當(dāng)你需要讓元素環(huán)繞某一個(gè)元素時(shí)，或者需要支持舊版本ie，或者不想處理inline-block帶來的空白問題時(shí)，使用浮動(dòng)。
感謝大家觀看
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
