CSS 屬性篇(七)：Display屬性

1、display屬性介紹

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。我將按順序爲這些屬性值一一講解。

2、display:none

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

3、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經過自定義在自動填滿一行，以下圖所示：

---

4、display:inline

1. inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化；
2. inline元素設置width、height屬性無效；
3. inline元素的margin和padding屬性，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果；但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom不會產生邊距效果。

以下圖所示：

---

5、display:inline-block

1. 將對象呈現爲inline對象，可是對象的內容做爲block對象呈現，以後的內聯對象會被排列在同一行內。就是集合了block和inline的所有優勢。width、height、margin、padding設置都會生效。

以下圖所示：