詳解CSS display:inline-block的應用

  

閱讀目錄

• 基礎知識
• inline-block的問題
• inline-block的應用
• 總結

本文詳細描述了display:inline-block的基礎知識，產生的問題和解決方法以及其常見的應用場景，加深了對inline-block應用的進一步理解。

回到頂部

基礎知識

display:inline-block是什麼呢？相信你們對這個屬性並不陌生，根據名字inline-block咱們就能夠大概猜出它是結合了inline和block二者的特性於一身，簡單的說：設置了inline-block屬性的元素既擁有了block元素能夠設置width和height的特性，又保持了inline元素不換行的特性。

舉例說明：之前咱們作橫向菜單列表的時候，咱們能夠經過li和float:left二者來實現，如今能夠經過li和display:inline-block。

HTML代碼：

1 <ul>
2     <li>首頁</li>
3     <li>關於</li>
4     <li>熱點</li>
5     <li>聯繫咱們</li>
6 </ul>

CSS代碼

1 ul, li { padding: 0; margin: 0; list-style-type: none; }
2         li { display: inline-block; border: 1px solid #000; }

效果圖

inline-block基本效果

能夠看到li元素能夠橫向排列，而且能夠設置width屬性，你們能夠複製代碼本身查看效果或查看Demo

回到頂部

inline-block的問題

觀察上面的例子，細心的同窗確定會發現，每一個li之間有一個小空隙，而咱們的代碼中並無設置margin等相關屬性，這是爲何呢？

默認的inline元素

首先，咱們觀察一下默認的inline元素的表現：

HTML代碼

1 <a>首頁</a>
2 <a>熱點</a>

CSS代碼

1 a { margin: 0; padding: 0; border: 1px solid #000; }

效果圖

inline默認狀況

默認狀況下，inline元素之間就有空隙出現，因此結合了inline和block屬性的inline-block屬性天然也有這個特色。
那這些空隙是什麼呢，它們是空白符！

消除空白符

在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合併成一個。咱們編寫代碼時寫的空格，換行都會產生空白符。因此天然而然的兩個元素之間會有空白符，若是將上述例子中的a標籤寫成一行，空白符消失，菜單之間也就緊湊起來了。

空白符雖然是瀏覽器正常的表現行爲，可是一般狀況下，設計師同窗的設計稿不會出現這些空隙，咱們在還原設計稿的時候，怎麼去除掉這些空隙呢。
要去除空白符產生的間隙，首先要理解空白符歸根結底是個字符，經過設置font-size屬性能夠控制產生的間隙的大小。
首先咱們將font-size設置成50px試試，修改CSS代碼以下：

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}
2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

咱們修改ul的font-size爲50px，而li的font-size爲12px保持原來的字體大小，效果以下：

font-size:50px的空隙

能夠看到菜單之間的空隙變大了。
接着咱們設置font-site屬性爲0px，代碼以下

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}
2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

效果以下：

font-size:0的空隙

能夠看到菜單之間的空隙沒有了，你們能夠自行查看Demo

兼容性問題

在IE8+，FF和Chrome的瀏覽器，inline-block能夠完美的兼容，考慮到IE6和IE7等低版本瀏覽器的佔用率，雖然有辦法能夠兼容，但本文再也不贅述，你們有興趣的能夠查找相關資料。

回到頂部

inline-block的應用

inline-block的應用什麼場景有哪些呢？咱們你們考慮一個技術的應用場景時，首先必定要思考的是技術的特性和需求是否符合。inline-block的特色是結合inline和block兩種屬性的特性，能夠設置width和height，而且元素保持行內排列的特性，基於這一點，全部行內排列而且能夠設置大小的場景都是咱們能夠考慮使用inline-block的應用場景。下面舉例說明：

網頁頭部菜單

網頁頭部的菜單就是典型的橫向排列而且須要設置大小的應用，在inline-block以前，實現菜單基本都是用float屬性來實現，float屬性會形成高度塌陷，須要清除浮動等問題，使用inline-block實現就不須要在乎這樣的問題。代碼以下：

HTML代碼

 1 <div class="header">
 2     <ul>
 3         <li>
 4             <a href="javascript:;" target="_blank">服裝城</a>
 5         </li>
 6         <li>
 7             <a href="javascript:;" target="_blank">美妝館</a>
 8         </li>
 9         <li>
10             <a href="javascript:;" target="_blank">超市</a>
11         </li>
12         <li>
13             <a href="javascript:;" target="_blank">全球購</a>
14         </li>
15         <li>
16             <a href="javascript:;" target="_blank">閃購</a>
17         </li>
18         <li>
19             <a href="javascript:;" target="_blank">團購</a>
20         </li>
21         <li>
22             <a href="javascript:;" target="_blank">拍賣</a>
23         </li>
24         <li>
25             <a href="javascript:;" target="_blank">金融</a>
26         </li>
27         <li>
28             <a href="javascript:;" target="_blank">智能</a>
29         </li>
30     </ul>
31 </div>

CSS代碼：

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; }
2 a { text-decoration: none; color: #333; } 
3 .header ul { font-size: 0; text-align: center; }
4        .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

效果圖

京東首頁導航菜單

這是模仿京東首頁頭部導航菜單的實現，使用inline-block能夠很簡單的實現橫向菜單列表

內聯塊元素

除了菜單以外，一切須要行內排列而且可設置大小的需求就能夠用inline-block來實現。
例如使用a標籤作按鈕時，須要設置按鈕的大小，咱們就可使用inline-block來實現。

HTML代碼

1 <div>
2     點擊右邊的按鈕直接購買
3     <a href="javascript:;" class="button">
4         購買
5     </a>
6 </div>

CSS代碼

1 .button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

效果圖

a標籤菜單

佈局

inline-block也能夠用於常見的佈局，使用它就不須要去注意float屬性佈局帶來的問題。
舉例說明，建立一個常見的3列布局。

HTML代碼

 1 <div class="wrap">
 2     <div class="header">
 3         網頁頭部
 4     </div>
 5     <div class="content">
 6         <div class="left">
 7             左側
 8         </div>
 9         <div class="center">
10             中間
11         </div>
12         <div class="right">
13             右側
14         </div>
15     </div>
16     <div class="footer">
17         網頁底部
18     </div>
19 </div>

CSS代碼

1 body, div { margin: 0; padding: 0; }
2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }
3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }
4     .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }
5     .content .left, .content .right { width: 200px; }
6     .content .center { width: 600px; background: #00ffff; }

效果圖

inline-block的三列布局

這個例子使用了inline-block作出了常見的網頁佈局。

關於inline-block的應用，只要是從左到右，從上到下，而且須要設置大小的列表均可以用它來實現，而這種需求是很是常見的，相比於float，我更推薦inline-block。inline-block的應用應該還有不少，你們能夠多多挖掘出來。

回到頂部

總結

相比於使用float所帶來的問題，使用inline-block所須要注意的點主要是空白符帶來的問題，這一點也能夠很方便的解決。
使用inline-block能夠很方便的進行列表佈局，更加符合咱們的思惟習慣，相信使用它的同窗們也會愈來愈多，歡迎你們討論。

原文地址：http://luopq.com/2015/11/01/display-inline-block/