css知多少（10）——display

1. 引言

　　網頁的全部元素，除了「塊」就是「流」，並且「流」都是包含在「塊」裏面的（最外層的body就是一個「塊」）。在本系列一開始講《瀏覽器默認樣式》的時候，你們也都看到了瀏覽器默認樣式中規定了html元素哪些屬於「塊」（剩下的就是「流」）。這部分知識很是重要也很是基礎，所以在全部的前端面試題中，都會問道哪些元素是「塊」哪些元素是「流」。

　　

　　其實，這部分知識都囊括在display這個樣式設置中。在網上查找出display全部的屬性，你會發現它有不少，可是不是每一個都經常使用，甚至大部分你都沒有用過。這個不要緊，學以至用，用不到的就能夠先不學，知道就行，何時用，何時再去詳細學——前提是你知道有這麼個東西，不然無從下手。

　　

　　看上圖。經常使用的屬性有：none、block、inline、inline-block、inherit，其中inherit是繼承父元素的樣式，不用多說，其餘的幾個會在下文詳解。其餘的都不經常使用，可是有一些仍是須要點出來，其實這些已經在《瀏覽器默認樣式》一節講到了，這裏簡單描述一下，詳細的能夠參考瀏覽器默認樣式一節。

1. list-item：經過它能夠模擬li列表樣式；
2. table：也是一個「塊」，但和block相比，table具備包裹性；
3. table-cell：最新的多列布局解決方案；

2. inline

　　經常使用的inline就是文字和圖片，其實inline真沒什麼好說的，你們能夠把它想象成一個杯子裏的水，它是「流」，是沒有大小和形狀的，它的寬度取決於父容器的寬度。

　　所以，針對inline的標籤，你設置寬度和高度是無效的，經過監控能夠知道，該元素實際的寬度和高度都是auto，並非咱們設定的值。

　　

      

　　一個很基礎的問題：如何把inline元素轉換成「塊」元素？相信絕大部分人的回答是display:block，可是你應該知道這不是一個惟一的答案。至少我設置display:table也是能夠的吧？

       還有兩種狀況你應該去了解（若是你不知道的話）：

       第一，對inline元素設置float

       仍是剛纔那個例子，咱們對span元素添加一個float:left，運行看看效果，你就會大吃一驚。從顯示的效果和監控的結果上看來，span元素已經「塊」化。注意，上一節剛剛講完float，不要忘記float的「破壞性」、「包裹性」，在這裏一樣適用。

　　

       第二，對inline元素設置position:absolute/fixed

       仍是有同一個例子作演示，此次在span元素上加上absolute/fixed，效果你們應該能猜到，和加上float的效果相同。至於absolute/fixed有什麼特性，會在下一節介紹position時提到。

　　

3. block

　　本系列有一節重點講解了《盒子模型》，不知道你們看沒看過，或者說你已經很瞭解盒子模型了。

　　其實對於block，我以爲就是「盒子模型」。一個元素設置了block，它就必須遵循盒子模型的規則。所以，這裏也再也不去詳細寫它了，你們能夠去盒子模型那一節好好看看，就那麼點內容。

4. inline-block

　　這個話題還得從《瀏覽器默認樣式》這一節開始。瀏覽器默認樣式中規定了幾個html元素爲display:inline-block，回顧一下。

　　

　　初學者對於inline-block可能比較陌生，不要緊，一步一步來。首先，你應該知道inline是什麼樣子的，就是通常的文字、圖片；其次，你應該知道block是什麼樣子的，通常的div就是；最後，inline-block顧名思義，它既有inline的特性，又有block的特性，你們能夠想一想通常的button、input是什麼樣子的。

　　那button舉例子。咱們在頁面中輸入若干個<button>，發現它們是「流」式排列的（能夠對比一下若干個<div>的排列方式）。可是針對一個button，咱們還能夠自定義修改它的形狀，這樣就有「塊」的特徵。

      

　　所以，inline-block的特色能夠總結爲：外部看來是「流」，可是自身確實一個「塊」。不知道你們理解也無？

5. 總結

　　我看《css設計指南》書中關於display的內容就寫了不到一頁，側面反映出display的內容不是不少，可是也看你怎麼去理解和應用，若是詳細品味起來，仍是頗有意思的。你們有意見的能夠留言交流。

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

本系列的目錄頁面：http://www.cnblogs.com/wangfupeng1988/p/4325007.html

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

學習做者教程：《前端JS高級面試》《前端JS基礎面試題》《React.js模擬大衆點評webapp》《zepto設計與源碼分析》《json2.js源碼解讀》

也歡迎關注個人開源項目——wangEditor，簡潔易用的web富文本編輯器

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