詳解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/
詳解CSS display:inline-block的應用(轉)