? ??????在了解可以通過(guò)設(shè)置display：inline-block會(huì)將塊級(jí)元素?fù)碛衖nline元素一行排列的特性，那么我們可能想要通過(guò)將li的display屬性設(shè)置為inline-block來(lái)實(shí)現(xiàn)塊級(jí)元素的行排列，這時(shí)候你可能說(shuō)通過(guò)設(shè)置浮動(dòng)float就可以解決，不著急，float的原理和實(shí)現(xiàn)作為補(bǔ)充內(nèi)容會(huì)接著聊，那么接下來(lái)先通過(guò)效果圖來(lái)看一下問(wèn)題所在
? ??????代碼展示（通過(guò)設(shè)置display將li元素行排列）：
效果如下：
是不是感覺(jué)不可思議？ 到底發(fā)生了什么呢？為什么加了文字后會(huì)出現(xiàn)塌陷和預(yù)期的不一樣？
一、解釋這種現(xiàn)象產(chǎn)生的原因
1.預(yù)備知識(shí)（display的屬性設(shè)置為inline-block、inline和block會(huì)有什么區(qū)別）
* inline?
1.inline元素不會(huì)獨(dú)占一行，多個(gè)相鄰的行內(nèi)元素會(huì)排列在同一行里，直到一行排列不下，才會(huì)新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
2.inline元素設(shè)置width,height屬性無(wú)效。
3.inline元素的margin和padding屬性。margin屬性不會(huì)生效。padding屬性會(huì)生效，但是會(huì)和其他兄弟元素發(fā)生邊距重疊。
*block
1.block元素會(huì)獨(dú)占一行，多個(gè)block元素會(huì)各自新起一行。默認(rèn)情況下，block元素寬度自動(dòng)填滿其父元素寬度。
2.block元素可以設(shè)置width,height屬性。塊級(jí)元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
3.block元素可以設(shè)置margin和padding屬性。
*inline-block
1.簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象，但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性。
2.預(yù)備知識(shí)（垂直對(duì)齊設(shè)置vertical-align)
????????這個(gè)屬性在前端領(lǐng)域出現(xiàn)得比較早，一開(kāi)始以為是和text-align屬性相反的設(shè)置，text-align是設(shè)置文本水平對(duì)齊方案，那么vertical-align肯定就是設(shè)置文本垂直對(duì)齊的方案啦，emm，其實(shí)也差不多，那么我們來(lái)分析一下這個(gè)屬性：
*為當(dāng)前元素設(shè)置垂直對(duì)齊方式，那我們首先就要明確有多少種方式可以選擇（如果之前沒(méi)有接觸過(guò)vertical-align，看到這些選擇可能會(huì)是懵的，別著急，繼續(xù)往下看）
?*這里我希望你認(rèn)真看一下vertical-align的官方定義及使用標(biāo)注，你會(huì)發(fā)現(xiàn)特別說(shuō)明只有inline和inline-block元素才能設(shè)置
????????解釋一下 top middle baseline bottom ，這個(gè)是張?chǎng)涡竦囊粡垐D，想要通過(guò)我們小學(xué)的英文作業(yè)本來(lái)解釋這個(gè)線的劃分，暫時(shí)未發(fā)現(xiàn)更通俗易懂的解釋
????????對(duì)于inline-block元素來(lái)說(shuō)，他的基線取決于元素本身的特性，在該元素中沒(méi)有行內(nèi)子元素（DOM樹(shù)的子元素，有塊子元素不算但是塊子元素中有行元素算）的時(shí)候或者overflow不為visible，該inline-block的基線為margin-bottom的下邊界。否則，以該元素中最后一個(gè)行框子元素的基線為該元素的基線
3.解釋上述問(wèn)題中前兩個(gè)li元素會(huì)下移
????????這里先做一個(gè)聲明：說(shuō)到底設(shè)置display為inline-block沒(méi)錯(cuò)，錯(cuò)在瀏覽器的vertical-align的默認(rèn)值為baseline
????????由上面baseline的定義可知第一個(gè)li的baseline在哪 ，很明顯就是下面這條黑色的線（上面一條黑線畫(huà)失誤請(qǐng)忽略。。。），如果不是很明白請(qǐng)多理解上面baseline的定義，如果上面的知識(shí)點(diǎn)你都懂，那么你應(yīng)該明白了為什么第二個(gè)li會(huì)是那么排列
二.解決辦法
1.當(dāng)然很明顯的一個(gè)辦法是為li設(shè)置vertical-align為top
2.第二個(gè)方法是設(shè)置overflow設(shè)置為hidden
3.第三個(gè)方法是干脆不設(shè)置display，直接設(shè)置float為left
三.設(shè)置float和display-inline的不同
1.float是一種脫離文檔流的浮動(dòng)，所以會(huì)對(duì)下面元素的布局產(chǎn)生影響
2.inline-block不會(huì)影響文檔柳，所以不會(huì)影響下面的元素的布局
