CSS 佈局 - display 屬性
display 屬性是控制佈局最重要的 CSS 屬性。
display 屬性
display 屬性用於指定一個元素在網頁上的顯示方式。
每個 HTML 元素都有一個預設的 display 值，取決於它是哪種型別的元素。大多數元素的預設 display 值是 block 或 inline。
display 屬性用於更改 HTML 元素的預設顯示行為。
塊級元素
塊級元素總是從新行開始，並佔據所有可用寬度（向左和向右拉伸到最大）。
塊級元素的示例
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
行內元素
行內元素不會從新行開始，並且只佔據必要的寬度。
這是一個段落內的行內 <span> 元素。
行內元素的示例
- <span>
- <a>
- <img>
display 屬性值
display 屬性有許多值
| 值 | 描述 |
|---|---|
| inline | 將元素顯示為行內元素 |
| block | 將元素顯示為塊級元素 |
| contents | 使容器消失，使其子元素成為 DOM 中上一級的子元素 |
| flex | 將元素顯示為塊級 flex 容器 |
| grid | 將元素顯示為塊級 grid 容器 |
| inline-block | 將元素顯示為行內塊級容器。元素本身被格式化為行內元素，但你可以設定高度和寬度值 |
| inline-flex | 將元素顯示為行內 flex 容器 |
| inline-grid | 將元素顯示為行內 grid 容器 |
| inline-table | 元素顯示為行內 table |
| list-item | 讓元素表現得像一個 <li> 元素 |
| run-in | 根據上下文，將元素顯示為 block 或 inline |
| table | 讓元素表現得像一個 <table> 元素 |
| table-caption | 讓元素表現得像一個 <caption> 元素 |
| table-column-group | 讓元素表現得像一個 <colgroup> 元素 |
| table-header-group | 讓元素表現得像一個 <thead> 元素 |
| table-footer-group | 讓元素表現得像一個 <tfoot> 元素 |
| table-row-group | 讓元素表現得像一個 <tbody> 元素 |
| table-cell | 讓元素表現得像一個 <td> 元素 |
| table-column | 讓元素表現得像一個 <col> 元素 |
| table-row | 讓元素表現得像一個 <tr> 元素 |
| none | 元素完全移除 |
| initial | 將此屬性設定為其預設值 |
| inherit | 從其父元素繼承此屬性 |
Display: none;
display: none; 通常與 JavaScript 一起使用，用於在不刪除和重新建立元素的情況下隱藏和顯示元素。如果你想知道如何實現這一點，請檢視本頁的最後一個示例。
<script> 元素預設使用 display: none;。
點選顯示面板
此面板包含一個 <div> 元素，該元素預設隱藏（display: none;）。
它透過 CSS 設定樣式，我們使用 JavaScript 來顯示它（將其更改為 (display: block;）。
覆蓋預設的 display 值
如前所述，每個元素都有一個預設的 display 值。但是，你可以覆蓋它。
將行內元素更改為塊級元素，反之亦然，這對於使頁面看起來特定方式並仍然遵循 Web 標準非常有用。
一個常見的例子是將行內 <li> 元素用於水平選單
注意：設定元素的 display 屬性只會改變 **元素的顯示方式**，而不會改變 **它是什麼型別的元素**。因此，具有 display: block; 的行內元素不允許包含其他塊級元素。
以下示例將 <span> 元素顯示為塊級元素
以下示例將 <a> 元素顯示為塊級元素
隱藏元素 - display:none 還是 visibility:hidden？
display:none
visibility:hidden
重置
可以透過將 display 屬性設定為 none 來隱藏元素。元素將被隱藏，頁面將顯示得好像該元素不存在一樣。
visibility:hidden; 也會隱藏元素。
然而，元素仍然會佔據與之前相同的空間。元素將被隱藏，但仍會影響佈局。
更多示例
display: none; 和 visibility: hidden; 之間的區別
此示例演示了 display: none; 與 visibility: hidden; 的區別。
顯示更多 display 型別
此示例演示了更多 display 型別。
結合使用 CSS 和 JavaScript 來顯示內容
此示例演示瞭如何使用 CSS 和 JavaScript 在點選時顯示元素。
CSS Display/Visibility 屬性
| 屬性 | 描述 |
|---|---|
| display | 指定元素應如何顯示 |
| 可見性 | 指定元素是否應該可見 |
