# 布局類型 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 即可。