🔹display

╱🚧 under construction -> flow/writing direction

CSS ⟩ layout ⟩ display

block：
- 預設佔據所有寬度 (width = 100%)。
- 但可設定 width, height。
- 書寫方式預設為 writing-mode: horizontal-tb，水平方式、由上到下排版。 (tb 代表 top to bottom)，跟隨 flow direction 流動。
- 元素前後各會插入一個跳行 (line break)。
inline：
- width, height 由它的內容 (content) 決定，不可設定。
- 可以設定水平方向的 margin, padding。
- 無法設定垂直方向的 margin-top, margin-bottom。
- 跟隨 writing direction 流動。
inline-block：
- 排版方式像 inline 元素（由左至右、由上到下）。
- 但像 block 元素可設定 width, height。
- 內建 inline-block 元素：img, button, select, input, textarea。
inline-flex：
- 🚧
grid：
- 將元素變成一個容器 (container)，本身行為像 block 元素，但改變子元素的行為。
flex：
- 將元素變成一個容器 (container)，本身行為像 block 元素，但改變子元素的行為。
- display: flex：子元素朝水平方向排版 (flow direction 從 vertical 變為 horizontal)
none：
- 將元素從畫面上移除，彷彿沒這個元素一樣。

An element that is floated is automatically display: block.

Last updated 6 days ago