css知多少（10）——display

1. 引言

　　網(wǎng)頁(yè)的所有元素，除了“塊”就是“流”，而且“流”都是包含在“塊”里面的（最外層的body就是一個(gè)“塊”）。在本系列一開始講《瀏覽器默認(rèn)樣式》的時(shí)候，大家也都看到了瀏覽器默認(rèn)樣式中規(guī)定了html元素哪些屬于“塊”（剩下的就是“流”）。這部分知識(shí)非常重要也非常基礎(chǔ)，因此在所有的前端面試題中，都會(huì)問(wèn)道哪些元素是“塊”哪些元素是“流”。

　　其實(shí)，這部分知識(shí)都囊括在display這個(gè)樣式設(shè)置中。在網(wǎng)上查找出display所有的屬性，你會(huì)發(fā)現(xiàn)它有很多，但是不是每個(gè)都常用，甚至大部分你都沒(méi)有用過(guò)。這個(gè)沒(méi)關(guān)系，學(xué)以致用，用不到的就可以先不學(xué)，知道就行，什么時(shí)候用，什么時(shí)候再去詳細(xì)學(xué)——前提是你知道有這么個(gè)東西，否則無(wú)從下手。

　　看上圖。常用的屬性有：none、block、inline、inline-block、inherit，其中inherit是繼承父元素的樣式，不用多說(shuō)，其他的幾個(gè)會(huì)在下文詳解。其他的都不常用，但是有一些還是需要點(diǎn)出來(lái)，其實(shí)這些已經(jīng)在《瀏覽器默認(rèn)樣式》一節(jié)講到了，這里簡(jiǎn)單描述一下，詳細(xì)的可以參考瀏覽器默認(rèn)樣式一節(jié)。

list-item：通過(guò)它可以模擬li列表樣式；
table：也是一個(gè)“塊”，但和block相比，table具有包裹性；
table-cell：最新的多列布局解決方案；

2. inline

　　常用的inline就是文字和圖片，其實(shí)inline真沒(méi)什么好說(shuō)的，大家可以把它想象成一個(gè)杯子里的水，它是“流”，是沒(méi)有大小和形狀的，它的寬度取決于父容器的寬度。

　　因此，針對(duì)inline的標(biāo)簽，你設(shè)置寬度和高度是無(wú)效的，通過(guò)監(jiān)控可以知道，該元素實(shí)際的寬度和高度都是auto，并不是我們?cè)O(shè)定的值。

　　一個(gè)很基礎(chǔ)的問(wèn)題：如何把inline元素轉(zhuǎn)換成“塊”元素？相信絕大部分人的回答是display:block，但是你應(yīng)該知道這不是一個(gè)唯一的答案。至少我設(shè)置display:table也是可以的吧？

還有兩種情況你應(yīng)該去了解（如果你不知道的話）：

第一，對(duì)inline元素設(shè)置float

還是剛才那個(gè)例子，我們對(duì)span元素添加一個(gè)float:left，運(yùn)行看看效果，你就會(huì)大吃一驚。從顯示的效果和監(jiān)控的結(jié)果上看來(lái)，span元素已經(jīng)“塊”化。注意，上一節(jié)剛剛講完float，不要忘記float的“破壞性”、“包裹性”，在這里同樣適用。

第二，對(duì)inline元素設(shè)置position:absolute/fixed

還是有同一個(gè)例子做演示，這次在span元素上加上absolute/fixed，效果大家應(yīng)該能猜到，和加上float的效果相同。至于absolute/fixed有什么特性，會(huì)在下一節(jié)介紹position時(shí)提到。

3. block

　　本系列有一節(jié)重點(diǎn)講解了《盒子模型》，不知道大家看沒(méi)看過(guò)，或者說(shuō)你已經(jīng)很了解盒子模型了。

　　其實(shí)對(duì)于block，我覺得就是“盒子模型”。一個(gè)元素設(shè)置了block，它就必須遵循盒子模型的規(guī)則。因此，這里也不再去詳細(xì)寫它了，大家可以去盒子模型那一節(jié)好好看看，就那么點(diǎn)內(nèi)容。

4. inline-block

　　這個(gè)話題還得從《瀏覽器默認(rèn)樣式》這一節(jié)開始。瀏覽器默認(rèn)樣式中規(guī)定了幾個(gè)html元素為display:inline-block，回顧一下。

　　初學(xué)者對(duì)于inline-block可能比較陌生，沒(méi)關(guān)系，一步一步來(lái)。首先，你應(yīng)該知道inline是什么樣子的，就是一般的文字、圖片；其次，你應(yīng)該知道block是什么樣子的，一般的div就是；最后，inline-block顧名思義，它既有inline的特性，又有block的特性，大家可以想想一般的button、input是什么樣子的。

　　那button舉例子。我們?cè)陧?yè)面中輸入若干個(gè)<button>，發(fā)現(xiàn)它們是“流”式排列的（可以對(duì)比一下若干個(gè)<div>的排列方式）。但是針對(duì)一個(gè)button，我們還可以自定義修改它的形狀，這樣就有“塊”的特征。

　　因此，inline-block的特點(diǎn)可以總結(jié)為：外部看來(lái)是“流”，但是自身確實(shí)一個(gè)“塊”。不知道大家理解也無(wú)？

5. 總結(jié)

　　我看《css設(shè)計(jì)指南》書中關(guān)于display的內(nèi)容就寫了不到一頁(yè)，側(cè)面反映出display的內(nèi)容不是很多，但是也看你怎么去理解和應(yīng)用，如果詳細(xì)品味起來(lái)，還是很有意思的。大家有意見的可以留言交流。

---------------------------------------------------------------

本系列的目錄頁(yè)面：http://www.rzrgm.cn/wangfupeng1988/p/4325007.html

-------------------------------------------------------------------------------------------------------------

學(xué)習(xí)作者教程：《前端JS高級(jí)面試》《前端JS基礎(chǔ)面試題》《React.js模擬大眾點(diǎn)評(píng)webapp》《zepto設(shè)計(jì)與源碼分析》《json2.js源碼解讀》

也歡迎關(guān)注我的開源項(xiàng)目——wangEditor，簡(jiǎn)潔易用的web富文本編輯器