css中的inline-block效果怎么實現

這篇文章主要講解了“css中的inline-block效果怎么實現”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中的inline-block效果怎么實現”吧！

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

block

塊級元素特點：

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

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

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

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

inline

內聯元素特點：

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

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

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

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

inline-block

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

inline-block 元素特點：

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

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

說明：

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

IE下塊元素如何實現display:inline-block的效果？

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

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

2、直接讓塊元素設置為內聯對象呈遞（設置屬性display:inline），然后觸發(fā)塊元素的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元素。要注意的是這個是個大概的說法，每個特定的元素能包含的元素也是特定的，所以具體到個別元素上，這條規(guī)律是不適用的。比如 P 元素，只能包含inline元素，而不能包含block元素。一般來說，我們會用display:block，display:inline或者display:inline-block來調整元素的布局級別，其實display的參數遠遠不止這三種，僅僅是比較常用而已。

感謝各位的閱讀，以上就是“css中的inline-block效果怎么實現”的內容了，經過本文的學習后，相信大家對css中的inline-block效果怎么實現這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！