css中inline-block什麼意思

在css中，inline-block指的是“內聯塊狀元素”，它同時具備內聯元素、塊狀元素的特點；inline-block元素可以和其他元素都在一行上，元素的高度、寬度、行高以及頂和底邊距都可設定。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

block

區塊級元素特徵：

#1、每個區塊級元素都從新的一​​行開始，且其後的元素也另起一行。 （真霸道，一個區塊級元素獨佔一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

,

,

,

,

和
• 是區塊元素的範例。

inline

內嵌元素特點：

#1、和其他元素都在一行上；

2、元素的高度、寬度及頂部和底部邊距不可設定；

3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。

, , , , , 和是inline元素的例子。

inline-block

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特性。

inline-block 元素特徵：

1、和其他元素都在一行上；

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

說明：

並非所有瀏覽器都支援此屬性，目前支援的瀏覽器有：Opera、Safari在IE中對內嵌元素使用display: inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display:inline-block屬性的表症。從上面的這個分析，也不難理解為什麼IE下，對區塊元素設定display:inline-block屬性無法實現inline-block的效果。這時區塊元素只是被display:inline-block觸發了layout，而它本來就是行佈局，所以觸發後，區塊元素依然還是行佈局，而不會如Opera中區塊元素呈現為內聯物件。 

IE下區塊元素如何實現display: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; zoom:1;}

整體概念

block和inline這兩個概念是簡單的說法，完整確切的說應該是block-level elements (區塊級元素) 和inline elements (內嵌元素)。 block元素通常被現實為獨立的一塊，會單獨換一行；inline元素則前後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。

大體來說html元素各有其自身的佈局層級（block元素還是inline元素）：

#常見的區塊級元素有p, FORM, TABLE, P, PRE, H1~ H6, DL, OL, UL 等。
常見的內聯元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規律是不適用的。例如 P 元素，只能包含inline元素，而不能包含block元素。

一般來說，我們會用display:block，display:inline或display:inline-block來調整元素的佈局級別，其實display的參數遠遠不止這三種，只是比較常用而已。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是css中inline-block什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！