這篇“css中inline-block的概念是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“css中inline-block的概念是什么”文章吧。

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)從事網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)、微信小程序開(kāi)發(fā)、網(wǎng)站運(yùn)營(yíng)為一體的建站企業(yè)；在網(wǎng)站建設(shè)告別千篇一律，告別似曾相識(shí)，這一次我們重新定義網(wǎng)站建設(shè)，讓您的網(wǎng)站別具一格。響應(yīng)式網(wǎng)站建設(shè)，實(shí)現(xiàn)全網(wǎng)營(yíng)銷(xiāo)！一站適應(yīng)多終端，一樣的建站，不一樣的體驗(yàn)！

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

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

block

塊級(jí)元素特點(diǎn)：

1、每個(gè)塊級(jí)元素都從新的一行開(kāi)始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級(jí)元素獨(dú)占一行）

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

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

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

inline

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

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

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

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

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

inline-block

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

inline-block 元素特點(diǎn)：

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

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

說(shuō)明：

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

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

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

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

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

div {display:inline; zoom:1;}

總體概念

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

大體來(lái)說(shuō)html元素各有其自身的布局級(jí)別（block元素還是inline元素）：

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

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

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

以上就是關(guān)于“css中inline-block的概念是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱(chēng)：css中inline-block的概念是什么
分享地址：http://chinadenli.net/article14/pijoge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站建設(shè)、外貿(mào)建站、軟件開(kāi)發(fā)、商城網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)