# Display settings 顯示設置

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

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

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FF5LqVzLZM3wDvgsvp5hR%2Fimage.png?alt=media\&token=ff5d0a12-a7ea-468d-a767-54c828fa9095)

### Block

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

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FMMD8ItRV3xyP0fo75nBJ%2Fimage.png?alt=media\&token=7e5f08a8-ff71-453d-bb83-4e62f74b1ff8)

### Flexbox

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FQub9eOEHFqey77bG30EX%2Fimage.png?alt=media\&token=a30793b6-8e25-4d60-9e42-26862dac9f0b)

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F3b2H1tJXXjQng4OaROZ3%2Fimage.png?alt=media\&token=68861516-20d9-4a60-8e49-7e7ec32a036e)

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

### Grid

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F8TcT8DSrAg8pP3FTSiYk%2Fimage.png?alt=media\&token=10d0e34f-b17b-4e52-9bb9-9e7e965ea02d)

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FEfAIs5Cl0IjopV2irWLX%2Fimage.png?alt=media\&token=5424eaba-45fd-4352-a6b9-3012c6926a04)

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

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

### Inline block

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fnv22TXV3mBjaySIwi2Ao%2Fimage.png?alt=media\&token=52c2e24f-c9a0-40fb-a7d7-d0d524541be7)

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FjaJ7B6FLrkju2dRTUNdP%2Fimage.png?alt=media\&token=180d2879-a89e-460c-9f83-85bf9c5066fe)

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FIKjcdDw368EDtvSXyuLv%2Fimage.png?alt=media\&token=90545e40-3883-48fe-8983-c0471739b1f1)

### Inline

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

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fq6UzFwS0O3UpBbI4szUI%2Fimage.png?alt=media\&token=c5e5c68a-be9f-4923-8a61-07ecd9405eb1)

### Display: none 無

完全隱藏一個元素。

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

![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fc6kh3Qa5v0Ca49F4wxXd%2Fimage.png?alt=media\&token=aface853-277b-4e50-8964-098162b0fcbe)