CSS 屬性篇(七)：Display屬性

摘要： display 屬性規定元素應該生成的框的型別。 以下是一些關於display比較常用的屬性值： 值 描述 none 元素不會顯示 block 此元素...

display 屬性規定元素應該生成的框的型別。

以下是一些關於display比較常用的屬性值：

值	描述
none	元素不會顯示
block	此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline	預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
line-block	行內塊元素。（CSS2.1 新增的值）[IE6/7不支援]
list-item	此元素會作為列表顯示。
inline-table	此元素會作為內聯表格來顯示（類似 table），表格前後沒有換行符。
table	此元素會作為塊級表格來顯示（類似 table），表格前後帶有換行符。
table-row	此元素會作為一個表格行顯示（類似 tr）。
table-cell	此元素會作為一個表格單元格顯示（類似 td 和 th）.
inherit	規定應該從父元素繼承 display 屬性的值。

其中我們在前端開發中比較常用的屬性值一般是none、block、inline、inline-block。我將按順序為這些屬性值一一講解。

二、display:none

1. 將元素與其子元素從普通文件流中移除。這時文件的渲染就像元素從來沒有存在過一樣，也就是說它所佔據的空間消失了。元素的內容也會消失。

三、display:block

1. block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度；
2. block元素可以設定margin和padding屬性；
3. block元素可以設定width、height屬性。
4. 塊級元素即使設定了寬度，仍然是獨佔一行。塊級元素在設定寬度的情況下，是通過自定義margin-right來自動填滿一行，這個時候你設定margin-right是無效的；塊級元素在沒有設定寬度的時候，margin-right會生效，塊級元素的width通過自定義在自動填滿一行。

塊級元素在設定寬度的情況下，是通過自定義margin-right來自動填滿一行，這個時候你設定margin-right是無效的，如下圖所示：

塊級元素在沒有設定寬度的時候，margin-right會生效，塊級元素的width通過自定義在自動填滿一行，如下圖所示：