分針網——每日分享：display:inline、block、inline-block的區別
阿新 • • 發佈：2017-06-06
http://www.f-z.cn/id/209
display:block
將元素顯示為塊級元素，特點是：
總是在新行上開始； 高度，行高以及頂和底邊距都可控制； 寬度缺省是它的容器的100%，除非設定一個寬度 例子：
<div>, <p>, <h1>, <form>, <ul> 和 <li>
display:inline
將元素顯示為行內元素,特點是：
和其他元素都在一行上； 高，行高及頂和底邊距不可改變； 寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>
display:inline-block
需要切換的情況如下： 讓一個inline元素從新行開始；
IE下塊元素如何實現display:inline-block的效果？有兩種方法：
先使用display:inline-block屬性觸發塊元素，然後再定義display:inline，讓塊元素呈遞為內聯對象（兩個display要先後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，如果先定義了display:inline-block，然後再將display設回inline或block，layout不會消失）。代碼如下（...為省略的其他屬性內容）： div {display:inline-block;...} div {display:inline;} 直接讓塊元素設置為內聯對象呈遞（設置屬性display:inline），然後觸發塊元素的layout（如：zoom:1等）。代碼如下：
div {display:inline; zoom:1;...}
三者區別和用法的例子：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>display:inline、block、inline-block的區別</title> </head> <style> div, span { background-color: green; margin: 5px; border: 1px solid #333; padding: 5px; height: 52px; color: #fff; } .b { display: block; } .i { display: inline; } div.ib { display: inline-block; } div.ib { display: inline; } a.ib { display: inline-block; } a.ib { display: block; } span.v { padding: 0; margin: 0; border: 0; vertical-align: middle; height: 100% } </style> <body> <div>div display:block</div> <div class="i">div display:inline</div> <div class="ib">div display:inline-block</div> <span>span display:inline</span> <span class="b">span display:block</span> <span><a class="ib">a display:block</a></span><br/> <div><span class="v"></span>vertical-align:middle</div> </body> </html>
示例結果如下圖：
學習更多IT知識 加群：272292492
分針網——每日分享：display:inline、block、inline-block的區別