一、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。我將按順序為這些屬性值一一講解。
二、display:none
- 將元素與其子元素從普通文件流中移除。這時文件的渲染就像元素從來沒有存在過一樣，也就是說它所佔據的空間消失了。元素的內容也會消失。
三、display:block
- block元素會獨佔一行，多個block元素會各自新起一行。預設情況下，block元素寬度自動填滿其父元素寬度；
- block元素可以設定margin和padding屬性；
- block元素可以設定width、height屬性。
- 塊級元素即使設定了寬度，仍然是獨佔一行。塊級元素在設定寬度的情況下，是通過自定義margin-right來自動填滿一行，這個時候你設定margin-right是無效的；塊級元素在沒有設定寬度的時候，margin-right會生效，塊級元素的width通過自定義在自動填滿一行。
塊級元素在設定寬度的情況下，是通過自定義margin-right來自動填滿一行，這個時候你設定margin-right是無效的，如下圖所示：
塊級元素在沒有設定寬度的時候，margin-right會生效，塊級元素的width通過自定義在自動填滿一行，如下圖所示：
四、display:inline
- inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化；
- inline元素設定width、height屬性無效；
- inline元素的margin和padding屬性，水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果；但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom不會產生邊距效果。
如下圖所示：
五、display:inline-block
- 將物件呈現為inline物件，但是物件的內容作為block物件呈現，之後的內聯物件會被排列在同一行內。就是集合了block和inline的全部優點。width、height、margin、padding設定都會生效。
如下圖所示：