# 額外的尺寸和佈局控制

如果您發現自己需要使用自訂 CSS 屬性來微調元素大小和佈局，「樣式」面板的新增功能將幫助您做到這一點！現在您可以直接在「樣式」面板中設定框大小選項、剪輯溢出的內容以及調整垂直對齊方式。

### 剪輯溢出的內容

**“樣式”面板 >“大小”**&#x4E2D;&#x7684;**“溢出”**&#x5C6C;性現在支援**剪輯**值。如果您遇到**溢出**設定為**隱藏的**「黏性」元素的意外行為，請嘗試使用新的**剪輯**值。

‍

<figure><img src="https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/66353cf4cfd4f56cb433ebed_style-panel-updates.webp" alt="“樣式”面板 >“大小”>“溢出”部分中提供了新的“剪輯”選項，目前位於“隱藏”選項旁邊"><figcaption></figcaption></figure>

### 控制箱尺寸

Webflow 中所有元素的預設方塊大小調整行為是**border-box**。這通常是可預測大小的元素所需的行為，但在設定帶有邊框的媒體元素的樣式時，您可能需要選擇不同的選項。現在，您可以直接&#x5F9E;**「樣式」面板 >「大小**」控制框大小，而無需使用自訂 CSS。

現在有兩種選擇：

* **border-box：**&#x4F7F;元素的寬度和高度包含內容、內邊距和邊框。無論填充和邊框大小如何，盒子的整體尺寸都不會增加。
* **Context-box：**&#x4F7F;元素的寬度和高度僅包含內容。填充和邊框大小添加到框尺寸的外部。

在帶有填充和邊框的元素上嘗試以觀察差異。

### 調整垂直對齊

通常，當您有多個內聯元素（例如圖示和一些文字）顯示時，您希望將這些元素垂直居中或以其他方式相互對齊。現在，您可以&#x5F9E;**「樣式」面板 >「版面配置」**&#x63A7;制此垂直對齊方式。

當**display**屬性設定為**inline**或**inline block**時，您會發現一個新的**align y**屬性，其中有多種選項可供選擇。

### 快速跳到 CSS 預覽

有時您可能想觀察給定選擇器產生了哪些樣式。除了新的尺寸和佈局控制之外，此更新還使 CSS 預覽功能更容易使用。現在，您可以&#x5F9E;**「樣式」面板**頂部的「...」選單（或「更多選項」）開啟**CSS 預覽**。

我們希望這組更新能讓您更靈活地調整元素的大小和對齊方式。要了解有關大小和佈局的更多信息，[請查看 Webflow University 上的文件](https://university.webflow.com/lesson/size-settings-width-height?topics=layout-design)。

***

May 6, 2024


---

# 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/changelog/2024/e-wai-de-chi-cun-he-bu-ju-kong-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.
