🔹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.

PrevioustopNextblock

Last updated

Was this helpful?