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

公司主營業務：成都網站建設、網站設計、移動網站開發等業務。幫助企業客戶真正實現互聯網宣傳，提高企業的競爭能力。成都創新互聯是一支青春激揚、勤奮敬業、活力青春激揚、勤奮敬業、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創新互聯推出天臺免費做網站回饋大家。

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

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

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下會觸發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是什么意思”的內容了，經過本文的學習后，相信大家對css中的inline-block是什么意思這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創新互聯，小編將為大家推送更多相關知識點的文章，歡迎關注！

網頁名稱：css中的inline-block是什么意思
URL網址：http://vcdvsql.cn/article42/pphshc.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、ChatGPT、外貿建站、服務器托管、靜態網站、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯