display屬性詳解

display用法

要掌握dispay這個元素用法之前我們先區分一下什麼是塊級元素與行級元素

1. 塊級元素
   塊級元素會佔領頁面的一行，其後多個block元素自動換行、 可以設定 width，height，設定了width後同樣也佔領一行、同樣也可以設定 margin與padding屬性。

ps:常見的塊級元素:div,img,ul,form,p等.
2. 行級元素
行級元素與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。

ps：常見的行級元素:em，strong，br,input等.

1. display:inline-block，block，inline元素的區別:
   1.display：block將元素顯示為塊級元素，從而可以更好地操控元素的寬高，以及內外邊距，每一個塊級元素都是從新的一行開始。
   2.display : inline將元素顯示為行內元素，高度，行高以及底邊距不可改變，高度就是內容文字或者圖片的寬度，不可以改變。多個相鄰的行內元素排在同一行裡，知道頁面一行排列不下，才會換新的一行。
   3.display：inline-block看上去值名inline-block是一個混合產物，實際上確是如此，將元素顯示為行內塊狀元素，設定該屬性後，其他的行內塊級元素會排列在同一行。比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，在同一行內有不同高度內容的元素時，通常要設定對齊方式如vertical-align: top;來使元素頂部對齊。