CSS - 顯示屬性：視覺魔法的入口！

你好啊，未來的 CSS 巫師們！? 我很高興能夠與你們一起踏上這個旅程，探索 CSS display 屬性的迷人世界。作為一個教了超過十年 CSS 的人，我可以向你們保證，掌握這個屬性就像打開了一個網頁設計可能性的寶藏。那麼，我們來一起深入了解一下吧！

顯示屬性是什麼？

在我們深入細節之前，讓我們先了解一一下 display 屬性到底做些什麼。簡單來說，它控制元素在網頁上的顯示方式。把它當成戲劇的導演，告訴每一位演員（元素）在舞台（你的網頁）上如何表現。

可能的值

display 屬性就像瑞士軍刀一樣 - 它有許多工具（值）應對不同情況。以下是我們將討論的最常見值的表格：

值	說明
inline	將元素顯示為行內元素（如 <span>）
block	將元素顯示為區塊元素（如 <div>）
inline-block	將元素顯示為行內級區塊容器
none	元素完全從文檔中移除
flex	將元素顯示為區塊級彈性容器
inline-flex	將元素顯示為行內級彈性容器
grid	將元素顯示為區塊級網格容器
inline-grid	將元素顯示為行內級網格容器
table	讓元素表現得像 <table> 元素
list-item	讓元素表現得像 <li> 元素

適用範圍

display 屬性適用於所有 HTML 元素。沒錯，你聽對了 - 所有！從微不足道的 <span> 到強大的 <div>，每個元素都可以受到這個強大屬性的影響。

DOM 語法

當使用 JavaScript 和文件對象模型（DOM）時，你可以像這樣操作 display 屬性：

element.style.display = "value";

例如：

document.getElementById("myElement").style.display = "none";

這會隱藏 ID 為 "myElement" 的元素。神奇吧？

CSS display - inline 值

讓我們從 inline 值開始。這是像 <span>、<a> 和 <img> 這樣的元素的默認值。

<style>
.inline-element {
display: inline;
background-color: yellow;
padding: 5px;
}
</style>

<p>這是一個包含 <span class="inline-element">行內元素</span> 的段落。</p>

在這個例子中，<span> 元素將與文字一起流動，不會從新行開始。它就像句子中的一個詞 - 不會打斷流動。

CSS display - block 值

接下來是 block 值。這是像 <div>、<p> 和 <h1> 到 <h6> 這樣的元素的默認值。

<style>
.block-element {
display: block;
background-color: lightblue;
padding: 10px;
margin: 10px 0;
}
</style>

<div class="block-element">這是一個區塊元素。</div>
<div class="block-element">這是另一個區塊元素。</div>

區塊元素從新行開始，並伸展到可用的完整寬度。它們就像書中的段落 - 每個都從新行開始。

CSS display - inline-block 值

inline-block 值是一種混合型 - 它結合了 inline 和 block 的特點。

<style>
.inline-block-element {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 5px;
}
</style>

<div class="inline-block-element"></div>
<div class="inline-block-element"></div>
<div class="inline-block-element"></div>

這些元素將並排坐著（像 inline），但你可以為它們設置寬度和高度（像 block）。這對於創建有如網格佈局而無需使用實際的網格或彈性佈局非常完美。

CSS display - none 值

none 值就像給你的元素施加了一個隱形斗篷。

<style>
.hidden {
display: none;
}
</style>

<p>你可以看到這個段落。</p>
<p class="hidden">但你看不到這個！</p>

具有 display: none 的元素完全從佈局中移除。它就像在頁面上不存在一樣。

CSS display - table 值

CSS 可以讓元素表現得像表元素，即使它們不是實際的 <table> 標籤。

<style>
.table {
display: table;
width: 100%;
border-collapse: collapse;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
border: 1px solid black;
padding: 5px;
}
</style>

<div class="table">
<div class="table-row">
<div class="table-cell">單元格 1</div>
<div class="table-cell">單元格 2</div>
</div>
<div class="table-row">
<div class="table-cell">單元格 3</div>
<div class="table-cell">單元格 4</div>
</div>
</div>

這創建了一個類似表的結構，而不使用實際的表標籤。這對於創建需要表行為的佈局非常有用，但具有更多的靈活性。

CSS display - flex 值

彈性盒子是一個強大的佈局工具，它從 display: flex 開始。

<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: lightgray;
}
.flex-item {
background-color: white;
margin: 10px;
padding: 20px;
}
</style>

<div class="flex-container">
<div class="flex-item">彈性項目 1</div>
<div class="flex-item">彈性項目 2</div>
<div class="flex-item">彈性項目 3</div>
</div>

這創建了一個彈性容器，其中的項目可以輕鬆對齊和分佈。這就像有一群可以完美伸展和收縮的體操選手一樣。

CSS display - inline-flex 值

inline-flex 與 flex 相似，但容器本身表現得像行內元素。

<style>
.inline-flex-container {
display: inline-flex;
background-color: lightpink;
}
.flex-item {
margin: 5px;
padding: 10px;
background-color: white;
}
</style>

<div class="inline-flex-container">
<div class="flex-item">項目 1</div>
<div class="flex-item">項目 2</div>
</div>
<div class="inline-flex-container">
<div class="flex-item">項目 3</div>
<div class="flex-item">項目 4</div>
</div>

這允許你在同一行上有多個彈性容器，這對於創建複雜佈局非常有用。

CSS display - grid 值

網格是另一個強大的佈局工具，從 display: grid 開始。

<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: lightblue;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 20px;
text-align: center;
}
</style>

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>

網格允許你創建有行和列的複雜佈局。這就像為你的元素擁有一個完美的電子表格！

CSS display - inline-grid 值

與 inline-flex 相似，inline-grid 創建一個行內級網格容器。

<style>
.inline-grid-container {
display: inline-grid;
grid-template-columns: auto auto;
gap: 10px;
background-color: lightyellow;
padding: 10px;
}
.grid-item {
background-color: white;
padding: 10px;
text-align: center;
}
</style>

<div class="inline-grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
</div>
<div class="inline-grid-container">
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

這允許你在同一行上有多個網格容器，開拓更多佈局可能性。

CSS display - list-item 值

最後，我們有 list-item，它讓元素表現得像列表項。

<style>
.custom-list {
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>

<div class="custom-list">這是一個自定義列表項</div>
<div class="custom-list">這是另一個自定義列表項</div>

這在你想創建類似列表的結構而不使用實際的 <ul> 或 <ol> 標籤時非常有用。

那就這樣吧，各位！我們一起穿過了 display 屬性的土地，從微不足道的 inline 到強大的 grid。記住，掌握 CSS 的關鍵是練習。所以，勇往直前，嘗試這些屬性吧。誰知道呢？你可能會創造出網頁設計的下一個大熱門！

快樂編程，願你的佈局總是像素完美！??

Credits: Image by storyset