以下在CSS顯示中的區別？

-1

我被問了一個問題，以下幾點和我並沒有真正知道答案有什麼區別。所以這裏有雲，是什麼以下在CSS顯示中的區別？

display:inline-block 
display:inline 
display:block

感謝您的答案......

2012-07-28 Shouvik

w3schools有答案：[CSS display property]（http://www.w3schools.com/cssref/pr_class_display.asp） – 2012-07-28 20:09:48

-1，因爲你顯然沒有打擾到查找它。你可以在google上多次找到答案。 – 2012-07-28 20:11:03

不，塊和內聯塊似乎表現出相同的行爲。我實際上可以互換使用它們。我也相信SO正試圖建立自己的問題。我沒有在這裏檢查，並沒有找到答案... – Shouvik 2012-07-28 20:12:47

你正在掙扎的主要原因之一是從你的問題在你的評論inline-block的之間的區別。

inline-block的是一種方式來獲得塊元素出現內聯，所以不是浮動的div留下的負荷，你可以對他們使用inline-block的，保留其行爲的div但讓他們來代替內聯元素。

例如可以說你有

<div style="display:block" >Test</div> 
<div style="display:block" >Home</div>

這將呈現爲

測試

首頁

凡爲

<div style="display:inline-block" >Test</div> 
<div style="display:inline-block" >Home</div>

將顯示爲

TestHome

此外，內聯元件不能有寬度/高度屬性。塊元素可以。 inline-block使塊元素看起來像內聯元素，但仍然可以應用只有塊元素才具有的樣式。看到這個demo。

2012-07-28 20:16:37

這與我在內部使用內聯代替內聯塊 – Shouvik 2012-07-28 20:20:15

是一樣的，但是對它們使用內聯現在使它成爲內聯元素，這不再作爲一個塊元素，而內聯塊使得它像一個塊一樣行動，但內聯。 – 2012-07-28 20:21:10

因此，一個塊元素在頂部和底部都有空格，與inline元素不同。 http://jsfiddle.net/QJpX8/ – Shouvik 2012-07-28 20:22:29

回答