inline、block與inline-block

 

參考了一些資料集其餘人的博客，梳理一下inline、block與inline-block三個概念。

 

		高度	寬度	舉例
block	在新行上開始	高度，行高以及頂和底邊距均可控制	寬度缺省是它的容器的100%，除非設定一個寬度	<div>, <p>, <h1>, <form>, <ul> 和 <li>
inline	和其餘元素都在一行上	高，行高及頂和底邊距不可改變	寬度就是它的文字或圖片的寬度，不可改變	<span>, <a>, <label>, <input>, <img>, <strong> 和<em>
inline-block	將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。

 

ie瀏覽器不支持inline-block屬性，使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表症。IE下，對塊元素設置display:inline-block屬性時，塊元素僅僅是被display:inline-block觸發了layout，而它本就是行佈局，因此觸發後，塊元素依然仍是行佈局，而不會如Opera中塊元素呈遞爲內聯對象。解決：

display:inline-block;

*display:inline;

*zoom:1;