在display屬性是用於控制佈局中最重要的CSS屬性。
顯示屬性
在display屬性指定一個元素是否/如何顯示。
每個HTML元素具有取決於它是什麼類型的元件的默認顯示值。 對於大多數元素的默認顯示值是block或inline 。
單擊顯示面板
此面板包含一個<div>元素，它在默認情況下（隱藏display: none ）。
它是風格與CSS，而我們使用JavaScript來顯示它（將其更改為（ display: block ）。
塊級元素
塊級元素總是開始於一個新行，佔用全部可用寬度（伸出來的左，右，只要它可以）。
塊級元素的例子：
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
內聯元素
內聯元素沒有開始一個新行，只需要盡可能多的寬度是必要的。
這是一個內嵌<span>元素的段落內 。
內聯元素的例子：
- <span>
- <a>
- <img>
顯示：無;
display: none;一般用JavaScript來隱藏和顯示而不刪除並重新創建這些元素。 看看我們的最後一個例子在此頁面上，如果你想知道如何可以做到這一點。
在<script>元素中使用display: none;作為其默認。
覆蓋默認的顯示值
正如前面提到的，每一個元素都有一個默認的顯示值。 但是，您可以覆蓋。
改變一個內聯元素塊元素，反之亦然，可以為使頁面看起來特定的方式，仍然遵循Web標準是有用的。
一個常見的例子是使內聯<li>水平菜單元素：
 | 注意：設置元素的顯示屬性只改變元素的顯示方式 ，而不是哪一種元素是。所以，用一個內聯元素display: block;不允許在它裡面其他的塊級元素。 |
|---|
下面的例子顯示<SPAN>元素塊元素：
隱藏的元素- display:none或visibility:hidden ？
隱藏一個元素可以通過設置來完成display屬性設置為none 。 該元素會被隱藏，並且頁面將顯示為如果元素不存在：
visibility:hidden;還隱藏的元素。
然而，該元件仍然會佔用相同的空間之前。 該元素會被隱藏，但仍然影響佈局：
更多示例
display: none;與visibility: hidden;
這個例子說明display: none;與visibility: hidden;
配合使用CSS用JavaScript來顯示內容
這個例子演示了如何使用CSS和JavaScript來顯示在點擊的元素。
自測練習用！
CSS顯示/能見度屬性
| 屬性 | 描述 |
|---|---|
| display | 指定的元件應該如何顯示 |
| visibility | 指定一個元素是否應該是不可見 |