css中的inline-block是什么意思

這篇文章主要講解了“css中的inline-block是什么意思”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css中的inline-block是什么意思”吧！

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

block

塊級元素特點：

1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

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

<p>, <p>, <h2>, <form>, <ul> 和 <li>是塊元素的例子。

inline

內(nèi)聯(lián)元素特點：

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

2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；

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

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline-block

內(nèi)聯(lián)塊狀元素（inline-block）就是同時具備內(nèi)聯(lián)元素、塊狀元素的特點。

inline-block 元素特點：

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

2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

說明：

并不是所有瀏覽器都支持此屬性，目前支持的瀏覽器有：Opera、Safari在IE中對內(nèi)聯(lián)元素使用display:inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發(fā)layout，從而使內(nèi)聯(lián)元素擁有了display:inline-block屬性的表癥。從上面的這個分析，也不難理解為什么IE下，對塊元素設(shè)置display:inline-block屬性無法實現(xiàn)inline-block的效果。這時塊元素僅僅是被display:inline-block觸發(fā)了layout，而它本就是行布局，所以觸發(fā)后，塊元素依然還是行布局，而不會如Opera中塊元素呈遞為內(nèi)聯(lián)對象。

IE下塊元素如何實現(xiàn)display:inline-block的效果？

有兩種方法：
1、先使用display:inline-block屬性觸發(fā)塊元素，然后再定義display:inline，讓塊元素呈遞為內(nèi)聯(lián)對象（兩個display要先后放在兩個css聲明中才有效果，這是IE的一個經(jīng)典bug，如果先定義了display:inline-block，然后再將display設(shè)回inline或block，layout不會消失）。代碼如下（...為省略的其他屬性內(nèi)容）：

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

2、直接讓塊元素設(shè)置為內(nèi)聯(lián)對象呈遞（設(shè)置屬性display:inline），然后觸發(fā)塊元素的layout（如：zoom:1等）。代碼如下：

div {display:inline; zoom:1;}

總體概念

block和inline這兩個概念是簡略的說法，完整確切的說應(yīng)該是 block-level elements (塊級元素) 和 inline elements (內(nèi)聯(lián)元素)。block元素通常被現(xiàn)實為獨立的一塊，會單獨換一行；inline元素則前后不會產(chǎn)生換行，一系列inline元素都在一行內(nèi)顯示，直到該行排滿。

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

常見的塊級元素有 p, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常見的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

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

一般來說，我們會用display:block，display:inline或者display:inline-block來調(diào)整元素的布局級別，其實display的參數(shù)遠遠不止這三種，僅僅是比較常用而已。

感謝各位的閱讀，以上就是“css中的inline-block是什么意思”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css中的inline-block是什么意思這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！