# Display settings 顯示設置

位於樣式面板中的顯示設置，控制一個元素的布局行為和該元素周圍的內容。

您可以在這裡控制元素之間的顯示方式--它們是堆疊在一起還是並排排列。

在樣式面板的布局部分，顯示設置包括六個顯示選項。這六個選項依序分別是

1. Block
2. Flexbox
3. Grid
4. Inline block
5. Inline
6. Display none

![](/files/8opWtMtFJr3mTujw1bSW)

### Block

Block是大多數元素的默認顯示設置。

每個元素在一個新的行上開始，並承接其父元素的全部寬度，除非設定了自定義寬度。

不管它的寬度如何，每個元素都會把下一個元素推到一個新行上。

![](/files/GskSn8bPreMrmUR9x657)

### Flexbox

具有Flexbox的元素，水平或垂直地排列子元素。

![](/files/VcOasHF34dMipLLPS3ri)

樣式面板中的布局部分還包括選擇Flexbox時的方向、對齊和子句的設置。\
您可以自定義子元素如何堆疊、何時包裹以及如何在flexbox內對齊。

![](/files/u9VB8NjhxrJkiZJ77OML)

Flexbox的對齊設置被設定為拉伸。五個對齊設置是置頂、置中、置底、拉伸和基線。\
創建一個Flexbox的容器時，所有子元素都可以在設置中添加和覆蓋布局。

### Grid

![](/files/7Yo33H0vrmvrR5kyRD7P)

您可以自定義子元素在Grid組件中的定位、對齊和分布方式：容器、單個單元格、單元格組或軌道。

![](/files/GFgAbK1t00HT4O2HmcMu)

編輯Grid面板包括列和行的間隙大小的輸入字段，方向選項和添加列和行的部分。還有一個帶有加號圖標的"區域"部分，用於添加一個新的區域。\
透過網格布局，你可以指定列和行之間的間隙，也可以使用FR單元來創建完全流動的網格布局。

當選擇一個Grid容器的子元素時，網格子單元設置會出現在樣式面板的頂部。這些設置允許你覆蓋網格容器的對齊和調整的設置。

### Inline block

Inline block是並排堆疊的，其寬度由裡面的內容決定。

![](/files/sZGLG7IUPF1hzQjvk8vx)

當內容碰到父元素的邊界時，裡面的元素也會被包起來。在樣式面板中，你可以對內嵌塊元素應用特定的寬度、高度、填充和邊距設置。

1. H1元素選擇Inline block。
2. 四個標題元素都在同一行。
3. 在左邊的尺寸面板上調整H1標題的寬度。
4. 標題元素在同一容器中被包裹成自己的行，並往下移一行。

![](/files/sXo6FqWAbndpSkKG7HzM)

![](/files/gl7pChw2HPZpm0XSJdME)

### Inline

Inline是任何文本內容的默認顯示設置。

您可以透過改變一個Inline元素的外距和內距來改變它的布局，但不能改變它的寬度和高度。

![](/files/1V1fPrjrVE6HVsk01bsn)

### Display: none 無

完全隱藏一個元素。

設置為Display: none的元素不會被瀏覽器渲染，這對於改變內容在移動設備上的顯示方式很方便。

![](/files/RWZAKgyROzeoelsOgtXf)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/03-designer-jie-mian-zong-lan/display-settings-xian-shi-she-zhi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.