css中inline-block是什么？本篇文章就給大家介紹在css中inline-block是什么意思，讓大家了解在css布局中使用inline-block的好處。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。

首先我們來(lái)了解一下inline-block是什么？

inline-block表示的是行內(nèi)塊狀元素，比如：img、input在默認(rèn)情況下即為行內(nèi)塊狀元素，即：默認(rèn)情況下，display屬性的值為inline-block。

inline-block的特點(diǎn)：既能夠設(shè)置寬高，又不獨(dú)自占據(jù)一行。

因?yàn)閕nline-block元素的這個(gè)特點(diǎn)，它可以在css布局中起到很大的作用。

在過(guò)去很長(zhǎng)的一段時(shí)間內(nèi)，人們想要?jiǎng)?chuàng)建很多網(wǎng)格來(lái)鋪滿瀏覽器(如下圖)，第一時(shí)間想到的就是使用 float 屬性，但是浮動(dòng)有很多局限性，我們?cè)谑褂酶?dòng)布局后，還要清除浮動(dòng)，消除浮動(dòng)對(duì)其他元素的影響。

其實(shí)使用 inline-block同樣也可以實(shí)現(xiàn)上述的效果會(huì)更簡(jiǎn)單。

只要設(shè)置 display 屬性的值為inline-block就可以實(shí)現(xiàn)相同效果，且元素不會(huì)脫離文本流。.box {

width: 80px;

height: 80px;

border: 2px solid peru;

display: inline-block;

margin: 10px 8px;

}

效果圖：

達(dá)到了和float(浮動(dòng))一樣的效果，還不用為了避免一些問(wèn)題(比如：父元素高度坍塌)而設(shè)置clear:both;(清除浮動(dòng))。

inline-block實(shí)現(xiàn)布局時(shí)，需要你牢記的一些事情：

1、vertical-align 屬性會(huì)影響到 inline-block 元素，需要把它的值設(shè)置為 top ；

2、需要設(shè)置每一列的寬度；

3、如果html源代碼中元素之間有空格，那么列與列之間也會(huì)產(chǎn)生空隙。

空隙問(wèn)題也很好解決，你可以：

對(duì)父元素添加，{font-size:0}，即將字體大小設(shè)為0，那么那個(gè)空白符也變成0px，從而消除空隙。不過(guò)要注意，如果本身盒子內(nèi)有文本，需要同時(shí)設(shè)置自身的字體大小為一個(gè)合適的值，不然會(huì)不顯示。.demo {

width: 520px;

overflow: hidden;

border: 2px solid paleturquoise;

font-size: 0;

}

.box {

width: 80px;

height: 80px;

border: 2px solid peru;

display: inline-block;

font-size: 14px;

}

現(xiàn)在這種方法已經(jīng)可以兼容各種瀏覽器，以前chrome瀏覽器是不兼容的

4、瀏覽器兼容性：ie6/7是不兼容 display：inline-block的所以要額外處理一下：

對(duì)于ie6/7以下的瀏覽器，需要：

如果是行內(nèi)元素，直接使用{dislplay:inline-block;}

如果是塊級(jí)元素：需添加{display:inline;zoom:1;}

總結(jié)：以上就是本篇文的全部?jī)?nèi)容，希望能對(duì)大家的學(xué)習(xí)有所幫助。更多相關(guān)視頻教程，請(qǐng)?jiān)L問(wèn)：css教程！

總結(jié)

以上是生活随笔為你收集整理的inline-block什么意思中文_css中inline-block是什么？inline-block布局的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。