代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: cf阿拉维斯如何钻bug > 站長學院 > 建站教程 >

皇家社会VS阿拉维斯预测:display:inline、block、inline-block的區別

來源:未知 發布時間:2019-04-13熱度: ℃我要評論
display:block就是將元素顯示為塊級元素. block元素的特點是: 總是在新行上開始; 高度,行高以及頂和底邊距都可控制; 寬度缺省是它的容器的100%,除非設定一個寬度 div, p, h1, form, ul 和 li是塊元素的例子。 display:inline就是將元素顯示為行內元素. inline元素...

cf阿拉维斯如何钻bug www.rxtxrm.com.cn 織夢模板免費下載,無需注冊無需充值

display:block就是將元素顯示為塊級元素.

  block元素的特點是:

  總是在新行上開始;

  高度,行高以及頂和底邊距都可控制;

  寬度缺省是它的容器的100%,除非設定一個寬度

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

display:inline就是將元素顯示為行內元素.

  inline元素的特點是: 

  和其他元素都在一行上;

  高,行高及頂和底邊距不可改變;

  寬度就是它的文字或圖片的寬度,不可改變。

  <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

inline和block可以控制一個元素的行寬高等特性,需要切換的情況如下:

       讓一個inline元素從新行開始;

  讓塊元素和其他元素保持在一行上;

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

  控制inline元素的高度;

  無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

 

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;...}

 

以下用個例子來說明三者的區別和用途

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="//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{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>

本文地址://www.rxtxrm.com.cn/news/1639.html

    發表評論

    評論列表(條)