嗨～歡迎來到「30天前端設計之旅」的DAY 13！今天將深入探索如何通過顯示屬性來控制元素在頁面上的呈現方式，並進一步了解一些重要的區塊相關屬性。這些技巧能幫助我們靈活調整頁面布局，創造出更具互動性和動態效果的設計。

顯示屬性：決定元素的行為方式
顯示屬性（Display Property）是 CSS 中最重要的屬性之一，它決定了元素是以區塊、行內元素、還是其他方式呈現在頁面上。理解並善用顯示屬性，能夠精確控制元素的布局，為網頁設計增添更多的可能性。

D-13的學習目標：

1. 顯示屬性（Display Property）：
   • display: block;：將元素設為區塊級元素，佔據整行空間，通常用於 div、header 等元素。
   • display: inline;：將元素設為行內元素，與其他行內元素共享同一行，常用於 span、a 等元素。
   • 行內區塊元素（Inline-Block）：display: inline-block;：結合了行內和區塊元素的特性，使元素能夠與其他元素在同一行顯示，同時保有區塊元素的特性（如寬高、內外間距等）。
   • display: none;：完全隱藏元素，並且從文檔流中移除，不佔用任何空間。
   • visibility: hidden;：隱藏元素，但保留其在頁面上的空間，不影響其他元素的位置。
   • display: flex;：啟用彈性盒模型，使其子元素能夠更靈活地排列和對齊。這是現代網頁布局中非常強大的工具。
2. 區塊相關屬性（Block-Related Properties）：
   • 浮動（Float）與清除（Clear）：float：使元素浮動到父容器的左側或右側，常用於圖文混排或多列布局。例如：float: left;。clear：清除浮動影響，常用於浮動元素後的元素，以恢復正常的文檔流。例如：clear: both;。
   • 溢出處理（Overflow）： overflow：控制內容超出容器邊界時的行為，例如顯示滾動條（overflow: auto;）或隱藏超出部分（overflow: hidden;）。
   • 定位（Positioning）： position：控制元素的定位方式，包括靜態定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）。定位屬性是實現複雜布局和特效的關鍵。
   • 顯示順序（Z-Index）： z-index：控制元素在 z 軸上的堆疊順序，通常用於多層元素的顯示管理。例如：讓彈出式窗口顯示在最前面。
   • 彈性布局（Flexbox Layout）：主軸與交叉軸：理解彈性盒模型的主軸（主導方向）和交叉軸（垂直方向），並學習如何使用 justify-content 和 align-items 來控制子元素的排列和對齊。
   • 彈性項目（Flex Items）：通過設置 flex-grow、flex-shrink 和 flex-basis 屬性，靈活調整子元素的大小和比例，創造出動態的響應式布局。

掌握顯示屬性和區塊相關屬性，將使你能夠創建出更靈活、更具創意的網頁布局。今天就開始探索這些技術，讓你的設計更加出色吧！🖥️🔧