CSS中如何使用display:inline-block
小編給大家分享一下CSS中如何使用display: inline-block，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
十年建站經(jīng)驗(yàn)， 做網(wǎng)站、網(wǎng)站制作客戶的見證與正確選擇。創(chuàng)新互聯(lián)提供完善的營(yíng)銷型網(wǎng)頁建站明細(xì)報(bào)價(jià)表。后期開發(fā)更加便捷高效，我們致力于追求更美、更快、更規(guī)范。
迷之間隙
我們創(chuàng)建一個(gè)導(dǎo)航列表，并將其列表 item 設(shè)置為 inline-block，主要代碼如下：
.nav { background: #999; } .nav-item{ display:inline-block; /* 設(shè)置為inline-block */ width: 100px; background: #ddd; }
效果圖如下：
我們從效果圖中可以看到列表 item 之間有一點(diǎn)小空隙，但是我們?cè)诖a中并沒有設(shè)置 margin 水平間距。那么這個(gè)空隙是如何產(chǎn)生的呢？
這是因?yàn)槲覀兙帉懘a時(shí)輸入空格、換行都會(huì)產(chǎn)生空白符。而瀏覽器是不會(huì)忽略空白符的，且對(duì)于多個(gè)連續(xù)的空白符瀏覽器會(huì)自動(dòng)將其合并成一個(gè)，故產(chǎn)生了所謂的間隙。
對(duì)于上面實(shí)例，我們?cè)诹斜?item 元素之間輸入了回車換行以方便閱讀，而這間隙正是這個(gè)回車換行產(chǎn)生的空白符。
同樣對(duì)于所有的行內(nèi)元素（inline，inline-block），換行都會(huì)產(chǎn)生空白符的間隙。
如何消除空白符
從上面我們了解到空白符，是瀏覽器正常的表現(xiàn)行為。但是對(duì)于某些場(chǎng)景來說，并不美觀，而且間隙大小非可控，所以我們往往需要去掉這個(gè)空白間隙。一般來說我們有兩種方法來去掉這個(gè)換行引起間隙：代碼不換行和設(shè)置 font-size。
代碼不換行
我們了解到，由于換行空格導(dǎo)致產(chǎn)生換行符，因此我們可以將上述例子中的列表 item 寫成一行，這樣空白符便消失，間隙就不復(fù)存在了。其代碼如下：
但考慮到代碼可讀及維護(hù)性，我們一般不建議連成一行的寫法。
設(shè)置 font-size
首先要理解空白符歸根結(jié)底是個(gè)字符，因此，我們可以通過設(shè)置 font-size 屬性來控制產(chǎn)生的間隙的大小。我們知道如果將 font-size 設(shè)置為 0，文字字符是沒法顯示的，那么同樣這個(gè)空白字也沒了，間隙也就沒了。
于是順著這個(gè)思路就有了另一個(gè)解決方案：通過設(shè)置父元素的 font-size 為 0 來去掉這個(gè)間隙，然后重置子元素的 font-size，讓其恢復(fù)子元素文字字符。
所以該方法代碼如下：
.nav {
background: #999;
font-size: 0; /* 空白字符大小為0 */
}
.nav-item{
display:inline-block;
width: 100px;
font-size: 16px; /* 重置 font-size 為16px*/
background: #ddd;
}使用該方法時(shí)需要特別注意其子元素一定要重置 font-size，不然很容易掉進(jìn)坑里（文字顯示不出來）。
對(duì)齊問題
由于 inline-block 屬于行內(nèi)級(jí)元素，所以 vertical-align 屬性同樣對(duì)其適用。
在正式講解 vertical-align 之前，我們需要先說一些基本概念。
中線、基線、頂線、底線
中線（middle）、基線（baseline）、頂線（text-top、底線（text-bottom））是文本的幾個(gè)基本線，其對(duì)應(yīng)位置如下圖：
基線（base line）：小寫英文字母x的下端沿。
中線（middle line）：小寫英文字母x的中間。
頂線（text-top）：父元素 font-size 大小所組成的一個(gè)內(nèi)容區(qū)域的頂部
底線（text-bottom）：父元素 font-size 大小所組成的一個(gè)內(nèi)容區(qū)域的底部
vertical-align 的值
vertical-align 只接受8個(gè)關(guān)鍵字、一個(gè)百分?jǐn)?shù)值或者一個(gè)長(zhǎng)度值。下面我們將看看各關(guān)鍵字如何作用于行內(nèi)元素。
baseline 默認(rèn)元素的基線與父元素的基線對(duì)齊。
sub 將元素的基線與其父元素的下標(biāo)基線對(duì)齊。
super 將元素的基線與其父代的上標(biāo) - 基線對(duì)齊。
text-top 將元素的頂部與父元素的字體頂部對(duì)齊。
text-bottom 將元素的底部與父元素的字體的底部對(duì)齊。
middle 將元素的中間與基線對(duì)齊加上父元素的x-height的一半。
top 將元素的頂部和其后代與整行的頂部對(duì)齊。
bottom 將元素的底部和其后代與整行的底部對(duì)齊。
將元素的基線對(duì)準(zhǔn)給定長(zhǎng)度高于其父元素的基線。 像<長(zhǎng)度>值，百分比是line-height屬性的百分比
看完了這篇文章，相信你對(duì)CSS中如何使用display: inline-block有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
本文題目：CSS中如何使用display:inline-block
網(wǎng)站URL：http://m.jiaotiyi.com/article/ppihip.html