display:inline,display:inline-block,display:block 區別

時間 2019-12-17

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

原文原文鏈接

以前一直迷惑於display:inline/inline-block/block的異同，在度娘谷哥的幫助下，忽然有了一點思路。css

按照網上的介紹，inline將對象轉化爲內聯元素，block將對象轉化爲塊元素，而inline-block則將對象轉化爲具備塊屬性的內聯元素。html

多是由於本人理解能力有限，一直很糾結着難以理解這個說法。後來看到這麼一個解釋[1]：瀏覽器

內聯元素即全部元素都在一行上，無先後換行符，且沒法限定高寬，即高寬爲其內容的高寬。例如<input>,<img>,<span>,<em>都是內聯元素的例子。ide

塊元素即總在新行上開始，可控制高寬。<div>,<p>,<form>,<h1>爲塊元素的例子。測試

從例子上說，對span進行背景色限定時，會發現span的背景色老是和文字大小相符，即說明了內聯元素的特性。而對div增長背景色限定，則可無視其內容，根據div的高寬進行渲染。ui

可是，若是須要對span進行背景色限定，但又要對span的大小作規定，那就用到了inline-block。idea

<html>
<head>
<style>
#content{width:auto;height:200px;}
.blockdiv{background:#ccc;width:50%;height:50px;}
.inlinespan{background:#f60;width:50%;height:50px;}
</style>
</head>
<body>
<div id="content">
<div class="blockdiv">這段文字用於測試div的大小</div><span class="inlinespan">這段文字用於測試span的大小
</span>spa

</div>
</body>
</html>.net

例如上面這個例子，假如想使div.blockdiv和span.inlinespan在一行，但又但願控制div.blockdiv的高度，便可使用div.blockdiv{display:inline-block;}code

inline-block即將對象對外轉換爲內聯元素，但對內其內容又可限定高寬，具備塊元素的特徵屬性。這樣一來，規定了inline-block的元素會和周圍inline的元素在一行，但它又能夠指定高寬。

仍舊是萬惡的IE，IE6/7對inline-block的支持不夠完善。所以須要採用hack的方式，但首先須要明瞭這種hack的原理：

這是IE的一個經典bug，若是先定義了display:inline-block，而後再設置display回inline或block，layout不會消失。但須要在兩個css中[2]。

IE6/7可識別的hack爲*,IE6爲_。參考[3,4]後，認定在如今IE6/7下的inline-block可經過如下原理實現。在IE中的方式有如下幾種，例如object

一、#object{

　　display:inline-block;//激活inline-block，使之在除IE8/7/6下的瀏覽器均實現,同時使IE下元素觸發block

　　zoom:1;//激活IE下的對象haslayout屬性

}

　　#object{

　　*display:inline;//IE6/7下的對象在保持有haslayout屬性前提下，表現爲inline