詳解css中的display屬性

發(fā)布時間：2014-09-02 09:35:03 作者：佚名

在一般的CSS布局制作時候，我們常常會用到display對應(yīng)值有block、none、inline這三個值。下面我們來分別來認識和學習什么時候用什么值。這里通過CSS display知識加實例講解方法來學習和了解DIV CSS display。

首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規(guī)定元素應(yīng)該生成的框的類型。默認值：inline

我們常用的display屬性值有：

inline
block
inline-block
none
把 display 設(shè)置成 none 不會保留元素本該顯示的空間，但是 visibility: hidden 還會保留。

那么，display:inline、display:block和display:inline-block有什么區(qū)別呢？

復(fù)制代碼

代碼如下:

我們發(fā)現(xiàn)內(nèi)聯(lián)對象`inline`給它設(shè)置屬性`height`和`width`是沒有用的，致使它變寬變大的
原因是內(nèi)部元素的寬高`+padding`。觀察inline對象的前后元素我們會發(fā)現(xiàn)`inline`不單獨占一行，
其它元素會緊跟其后。

而塊對象`block`是可以設(shè)置寬高的，但是它的實際寬高是本身寬高`+padding`。
觀察`block`的前后元素我們會發(fā)現(xiàn)`block`要單獨占一行。
然而，當我們即需要div有寬高，又不希望它獨占一行怎么辦？

這個時候我們就需要使用`inline-block`了，再觀察一下上面的demo，我們會發(fā)現(xiàn)`inline-block`
即具有`block`的寬高特性又具有`inline`的同行元素特性。
然而，在IE6/7下padding對inline的寬高是對其沒影響的。

那么，display的其他屬性值呢？

list-item 此元素會作為列表顯示。

run-in此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。

compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經(jīng)從 CSS2.1 中刪除。

table 此元素會作為塊級表格來顯示（類似table），表格前后帶有換行符。
inline-table 此元素會作為內(nèi)聯(lián)表格來顯示（類似table），表格前后沒有換行符。
table-row-group 此元素會作為一個或多個行的分組來顯示（類似tbody）
table-header-group 此元素會作為一個或多個行的分組來顯示（類似thead）
table-footer-group：此元素會作為一個或多個行的分組來顯示（類似tfoot）
table-row 此元素會作為一個表格行顯示（類似 tr ）。
table-column-group 此元素會作為一個或多個列的分組來顯示（類似 colgroup ）。
table-column 此元素會作為一個單元格列顯示（類似 col ）
table-cell 此元素會作為一個表格單元格顯示（類似 td 和 th）
table-caption 此元素會作為一個表格標題顯示（類似 caption）