display 掌握隱藏與顯示，讓頁面元素如魔法般出現與消失

##為什麼要有這功能
display 是網頁佈局的關鍵屬性之一，它決定了元素在頁面上的顯示方式和佈局行為。無論是完全隱藏元素，還是控制其佔據空間、排列方式，display 是控制網頁元素的顯示和結構佈局的核心屬性。它不僅能優化元素的外觀，還能提高使用者體驗與網頁效能。

##核心結構
display：定義元素如何顯示在頁面上。常見值如下：
none：元素完全不顯示，並且不佔據任何空間。
block：元素以區塊形式顯示，佔據整個父元素的寬度。
inline：元素以行內元素形式顯示，僅佔據內容所需的寬度。
inline-block：結合區塊與行內特性，元素以區塊方式顯示但不換行，僅佔據所需寬度。

##主要功能
控制元素顯示：通過 none 隱藏元素，或使用 block、inline 等來改變其排列和顯示方式。
佈局靈活性：不同的 display 值適合不同的佈局需求，比如** inline** 使多個元素並排顯示，而 block 則將元素放在新行。
可提升可讀性與整潔性：適當的顯示屬性能讓頁面更整潔，提升用戶體驗。

##注意事項
使用 display: none 會隱藏元素，且該元素不再佔據空間，這與 visibility: hidden 不同，後者隱藏元素但保留空間。
inline 元素不允許設置寬度和高度，這是需要注意的限制。
使用 inline-block 可以結合 block 和 inline 的特點，同時允許設置寬高，且不會自動換行。

##簡單範例應用

/* 顯示屬性範例 */
.box {
    width: 100px;  /* 設置元素寬度 */
    height: 100px;  /* 設置元素高度 */
    background-color: lightblue;  /* 設置背景色 */
    margin: 10px;
}

.hidden-box {
    display: none;  /* 完全隱藏元素，且不佔據空間 */
}

.block-box {
    display: block;  /* 以區塊形式顯示，佔據整行 */
}

.inline-box {
    display: inline;  /* 以行內形式顯示，並排顯示 */
}

.inline-block-box {
    display: inline-block;  /* 行內區塊形式，允許設置寬高 */
}