Display settings 顯示設置

調整顯示屬性來決定一個元素的基本布局行為。

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

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

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

1. Block

2. Flexbox

3. Grid

4. Inline block

5. Inline

6. Display none

Block

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

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

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

Flexbox

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

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

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

Grid

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

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

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

Inline block

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

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

1. H1元素選擇Inline block。

2. 四個標題元素都在同一行。

3. 在左邊的尺寸面板上調整H1標題的寬度。

4. 標題元素在同一容器中被包裹成自己的行，並往下移一行。

Inline

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

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

Display: none 無

完全隱藏一個元素。

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