一、首先要了解什么是塊級元素與行級元素

> - 塊級元素
會占領(lǐng)頁面的一行，其后多個block元素自動換行、 可以設(shè)置width，height，
設(shè)置了width后同樣也占領(lǐng)一行、同樣也可以設(shè)置   margin與padding屬性。
ps:常見的塊級元素:div,ul,form,p等
> - 行內(nèi)元素
與其他元素在同一行上，高度，行高以及底邊距不可改變，高度就是內(nèi)容文字或者圖片的寬度，不可以改變。
ps：em，strong等

二、display:inline

display:inline 元素顯示為行內(nèi)元素。
元素都使用默認高度，高度，行高以及底邊距不可改變，
高度就是內(nèi)容文字或者圖片的寬度，不可以改變，你設(shè)置了也沒有效果。
不強制換行,可以橫向并排幾個。
多個相鄰的行內(nèi)元素排在同一行里，直到頁面一行排列不下，才會換新的一行。

三、display:block

display:block  元素顯示為塊級元素。
元素默認情況下獨占一行（就像元素前后都給加了一個換行），可以設(shè)置寬度、高度、以及內(nèi)外邊距。
是強制換行的,下一個元素,會自動換行到這個下面排列,不會橫向并排。

四、display:block

display：inline-block看上去值名inline-block是一個混合產(chǎn)物，實際上確是如此。
既有行級元素的特性，也有塊級元素的特性，因此在同一行，能設(shè)置寬高。
將元素顯示為行內(nèi)塊狀元素，設(shè)置該屬性后，其他的行內(nèi)塊級元素會排列在同一行。
比如我們li元素一個inline-block，使其既有block的寬度高度特性，又有inline的同行特性，
在同一行內(nèi)有不同高度內(nèi)容的元素時，通常要設(shè)置對齊方式如vertical-align: top;來使元素頂部對齊。

PS : 有遺漏的細節(jié)請留言。