display:inline、block、inline-block的區別？

時間 2019-11-12

標籤 display inline block 區別欄目 CSS 简体版

原文原文鏈接

display：block; 就是將元素顯示爲塊級元素。html

block元素的特色是：瀏覽器

1.老是在新行上開始；ide

　2.高度，行高以及頂和底邊距均可控制；佈局

3.寬度缺省是它的容器的100%，除非設定一個寬度；ui

<div>、<p>、<h1>、<form>、<ul>和<li>是塊級元素的例子。spa

display：inline; 就是將元素顯示爲行內元素code

inline元素的特色：orm

1.和其餘元素都在一行上;xml

2.高、行高以及頂和底邊距不可改變;htm

3.寬度就是它的文字或圖片的寬度，不可改變;

<span><a><label><img><strong><em>是inline元素的例子

inline和block能夠控制一個元素的行寬高等特性，須要切換的狀況以下：

　　1.讓一個inline重新行開始;

　　2.讓塊元素和其餘元素保持在一行上;

　　3.控制inline元素的寬度(對導航條特別有用);

　　4.控制inline元素的高度;

　　5.無需設定寬度便可爲一個塊元素設定與文字同寬的背景色。

display:inline-block;將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。

inline-block的元素特色：

　　將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。(準確地說，應用此特性的元素呈現爲內聯對象，周圍元素保持在同一行，但能夠設置寬度和高度的塊元素的屬性)

　　並非全部瀏覽器都支持此屬性，目前支持的瀏覽器有:Opera、Safari在IE中對內聯元素使用display：inline-block，IE是不識別的，但使用display:inline-block在IE下會觸發layout，從而使內聯元素擁有了display：inline-block屬性的表徵。從上面的這個分析，也不難理解爲何IE下，對塊元素設置display:inline-block屬性沒法實現inline-block的效果。這時塊元素時被display：inline-block觸發了layout，而它本就是行佈局，因此觸發後，塊元素依然仍是行佈局，而不會如Opera中塊元素呈遞爲內聯對象。

　　IE下塊元素如何實現display：inline-block的效果？

有兩種方法：

　　1.先使用display：inline-block屬性觸發塊元素，而後再定義display：inline，讓塊元素爲內聯對象(兩個display要前後放在兩個CSS聲明中才有效果，這是IE的一個經典bug，若是先定義了display：inline-block，而後再將display設回inline或block，layout不會消失)。代碼以下：

div{display:inline-block;……}

div{display:inline;}

　　2.直接讓塊元素設置爲內聯對象呈遞(設置屬性display：inline)，而後觸發塊元素的layout(如：zoom：1等)，代碼以下：

div{display:inline;zoom:1;……}

如下用個例子來講明三者的區別：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>display:inline、block、inline-block的區別</title>
 6 </head>
 7 <style>
 8 div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
 9 .b{display:block;}
10 .i{display:inline;}
11 div.ib{display:inline-block;}
12 div.ib{display:inline;}
13 a.ib{display:inline-block;}
14 a.ib{display:block;}
15 span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
16 </style>
17 <body>
18 <div>div display:block</div>
19 <div class="i">div display:inline</div>
20 <div class="ib">div display:inline-block</div>
21 <span>span display:inline</span>
22 <span class="b">span display:block</span>
23 <span><a class="ib">a display:block</a></span><br />
24 <div><span class="v"></span>vertical-align:middle</div>
25 </body>
26 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。