理解display:inline、block、inline-block

要理解display:inline、block、inline-block的區別，須要先了解HTML中的塊級（block）元素和行級（inline）元素的特色，行內元素也叫內聯元素。

• 塊級元素

老是另起一行開始；
高度，行高以及頂、底邊距均可以控制；
寬度缺省是它所在容器的100%，除非設定一個寬度。
塊級元素一般做爲其餘元素的容器，能夠容納內聯元素和其餘塊元素。block element的HTML標籤以下：
address-地址
blockquote-塊引用
center-居中對齊塊
div-經常使用塊級元素
dl-定義列表
form-交互表單
fieldset-form控制組
hr-水平分隔線
ol-排序表單
ul-非排序列表
dir-目錄列表
p-段落
pre-格式化文本
isindex-input prompt
menu-菜單列表
table-表格
h1...h6-標題
noframes-frames可選內容（對於不支持frame的瀏覽器顯示此區塊內容）
noscript-可選腳本內容（對於不支持script的瀏覽器顯示此內容）

• 行級元素

和其餘元素都在一行上；
高度，行高以及頂、底邊距不可改變；
高度就是它所容納的文字或圖片的寬度，不可改變。
通常都是基於語義級（semantic）的基本元素，只能容納文本或者其餘內聯元素，內聯元素的HTML標籤分類以下：

a-錨點
abbr-縮寫
acronym-首字
font-字體設定（不推薦）
b-粗體（不推薦）
big-bidi override
em-強調
br-換行
small-小字體文本
strong-粗體強調
i-斜體
img-圖片
input-輸入框
label-表格標籤
select-項目選擇
textarea-多行文本輸入框
u-下劃線
var-定義變量
cite-引用
code-計算機代碼（在引用源碼的時候須要）
dfn-定義字段
kbd-定義鍵盤文本
q-短引用
s-中劃線（不推薦）
strike-中劃線
sub-下標
sup-上標
tt-電傳文本

HTML中有些元素是可變元素，可根據上下文語境決定該元素爲塊元素或者內聯元素。

applet-java applet
button-按鈕
del-刪除文本
iframe-inline frame
ins-插入的文本
map-圖片區塊（map）
object-object對象
script-客戶端腳本

 

display:block就是將元素顯示爲塊級元素，display:inline則將元素顯示爲行內元素。

display：inline-block將元素顯示爲行內元素，可是元素的內容做爲塊元素處理。旁邊的內聯元素和該對象顯示在同一行，而且容許空格，可是該元素具備塊元素的特性，能夠設置其高度，寬度等屬性。在同一行內有不一樣高度內容的元素時，一般要設置對齊方式如vertical-align: top;來使元素頂部對齊。

• 兼容性

CSS中使用display:inline-block;來樣式化，在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。可是在早期的IE，好比IE 7，對行內元素設置inline-block沒法實現inline-block的效果。只是觸發了塊元素的layout，而行內元素自己就是行佈局，因此觸發後，依然是行佈局。

對IE8如下的版本，能夠採用如下兩種方法來實現inline-block的效果：

1. 先用display:inline-block屬性觸發塊元素，而後再定義display:inline，讓塊元素呈遞爲內聯對象（原理：這是IE的一個經典bug，若是先定義了display:inline-block，而後再設置display回inline或block，layout不會消失），代碼以下：

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

    

2. 將塊元素設置爲內聯對象(display:inline)，而後經過zoom:1觸發塊元素的layout，代碼以下：

   div {
   display:inline; 
   zoom:1;
   }

    

     參考了http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html，和一些網上的資料，算是平時一點平時的學習總結吧！