# 布局類型 Div Block

{% embed url="<https://www.youtube.com/watch?t=114s&v=1AKlglpNMSU>" %}

![](https://i.imgur.com/Ka1xLun.png)

Layout 中這是網頁架構中最最基本的元素。而 **Secion -> Container-> Div Block** 是網頁開發中常見的層次結構。

Section 基本上就是每個段落的最大格，而 DivBlock 是設計專案時最長使用的最基本和最通用的元素，它可以是您想要的任何東西。

你可以使用 Container 中的 Div Block 使用Layout、Spacing、Size 和 Position 等樣式來組織元素。

![](https://i.imgur.com/9eypwnk.png)

在 Div Block 內放置元素時，它將根據裡面的內容自動調整大小。

![也可以在 Div Block 中設置顏色](https://i.imgur.com/rhni7Rb.png)

![增加陰影](https://i.imgur.com/o7Ew1CK.png)

![增加 Padding](https://i.imgur.com/VMxKx2m.png)

### 將 Div Block 轉換為 Link  <a href="#convert-div-blocks-to-link-blocks" id="convert-div-blocks-to-link-blocks"></a>

你甚至可以將 Div Block 轉換為超連結，以將其及其內容鏈接到其地方。若要將 Div 塊更改為 Link 塊，請確保 Div 塊不包含任何鏈接元素，然後右鍵單擊 Div 塊並將其轉換為 Link 即可。


---

# 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/4-yuan-su-de-lei-xing/bu-ju-lei-xing-div-block.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.