附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！

背景脈絡

接觸排版初期，總是苦惱於元素的換行、並排 ...

主題筆記

一、 什麼是 display？

控制元素排列方式的 property。

display 有非常多的 values 可以套用，目前排版常見flex、grid、none，還有等等要介紹的block、inline、inline-block（完整 values 可參考W3School - CSS display property）

二、元素有自己預設的 display

三、三大典型 display

⬆️ 圖片取自於ALPHA Camp課程講義

.

block

獨自佔用整個父層的寬度，不會和相鄰的元素在同一行，寬高可隨意調整

inline

緊鄰相鄰的元素，佔用的寬高由內容決定，無法隨意調整
（所以若要對行內元素進行尺寸之類的操作，要先重新設定 display）

inline-block

同時具有 inline 與 block 特性，可以與相鄰元素在同一行，初始寬高由內容決定，但可隨意調整

整理表

-- | 佔滿一行（寬）| 高 | 寬高可否手動調整？
------------- | -------------
block | ✅ | 跟隨內容 | ✅
inline | ❌跟隨內容 | 跟隨內容 | ❌
inline-block | ❌跟隨內容 | 跟隨內容 | ✅

疑惑

。 img 為行內元素，但它的寬高可以調整，所以算是特例？（暫時理解為如此）

參考資料

ALPHA Camp課程講義

以上是今天的分享，謝謝看完的你！