---
description: ╱🚧 under construction -> flow/writing direction
---

# display

[CSS](..) ⟩ [layout]() ⟩ display&#x20;

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

{% hint style="warning" %}
An element that is [**floated**](float) is <mark style="color:yellow;">automatically</mark> <mark style="color:blue;">`display: block`</mark>.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}
* [block](display/block "mention")
* [inline](display/inline "mention")
* [inline-block](display/inline-block "mention")
* [inline-flex](display/inline-flex "mention")
{% endtab %}

{% tab title="🗺️ 圖表" %}
<figure><img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FZsnJ9ggDOZJkP1HeJyb6%2Fdisplay.png?alt=media&#x26;token=ccc7749c-8c5b-4226-be7c-b946bf828abb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="⭐️ 重點" %}
* <mark style="color:blue;">`block`</mark> elements are like <mark style="color:yellow;">paragraphs</mark>, and <mark style="color:blue;">`inline`</mark> elements are like <mark style="color:yellow;">words</mark>.
{% endtab %}

{% tab title="📗 參考" %}
* Every Layout (2021)
{% endtab %}
{% endtabs %}
