block，inline,inline-block的區別

block: 英語翻譯過來是「塊」意思，就跟小時候玩過的積木方塊同樣，一塊一塊往上搭。

inline: 英語翻譯過來就是「內聯」的意思，內聯很差理解，個人理解就是行內元素；

block和inline都是比較通俗的說法，block應該是「block-level elments」(塊級元素)，inline應該是「inline elements」（行內元素）

細節對比：

display:block的元素;

　　一、在網頁中會單獨佔一行，默認狀況下他的寬度是填滿父級寬度，即便他的寬度比瀏覽器窗口小不少也不會讓後面的元素擠上來跟他同佔一行（比較小氣）;

　　二、能夠設置width和height;

　　三、還能夠設置padding和margin；

display:inline；

　　一、這樣樣式的元素就不同啦，他比較大方，他能夠和多個inline元素同佔一行，直到他們的寬度總和超過了瀏覽器窗口的寬度纔會將多出來的元素往下擠（由於實在太擠了）；

　　二、不能用width和height，由於這兩個個屬性在inline身上無效；

　　三、padding-left、padding-left、margin-left、margin-right有效，其餘方向上（上下）的padding和margin屬性無效；

display：inline-block;

　　一、簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。但width、height屬性對他們仍有效；

 

注意：IE（低版本IE，IE8及以上支持）原本是不支持inline-block的，因此在IE中對內聯元素使用display:inline-block，理論上IE是不識別 的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表象。

那麼如何讓IE低版本支持inline-block呢？

方法1：先使用display:inline-block屬性觸發塊元素，而後再定義display:inline，讓塊元素呈遞爲內聯對象（兩個display 要前後放在兩個css聲明中才有效果，這是ie的一個經典bug，若是先定義了display:inline-block，而後再將display設回 inline或block，layout不會消失）。代碼以下：

div{ display:inline-block;}
div{ display:inline;}

方法2：直接讓塊元素設置爲內聯對象呈遞（設置屬性display:inline），而後觸發塊元素的layout（如：zoom:1等）。代碼以下：

div{ display:inline-block;
     zoom:1;
}

 

 

常見的塊級元素：div、p、form、h1-h六、pre、ol、ul、dl等等；

常見的內聯元素：span、a、img、input、textarea、br、em、label、strong、select等等