# 2 Box 盒子模組介紹

盒子模組描述了佈局在網絡上的工作方式。

Photoshop 或 PowerPoint 等工具允許您將元素放置在給定文檔中的任何位置。Web 佈局基於垂直堆疊的內容，就像文檔中的段落一樣。 在本課中：

1. 了解 boxes
2. 使用 boxes 進行響應式設計
3. 群組 boxes
4. 嵌合 boxes

#### 了解 boxes

所有元素都是 boxes。這個網頁上的每個元素都被視為一個盒子——想像每個元素周圍都有一個不可見的邊界。這些盒子自然而然地彼此相鄰或堆疊在一起，具體取決於它們的屬性。

#### 使用 boxes 進行響應式設計

Web 內容不像 PowerPoint 或 Photoshop 文檔，其中的元素可以手動放置在任何地方。這些文檔沒有響應——創建的內容是為了以一種分辨率查看。

![相反，Web 佈局的行為更像是 Word 文檔——內容自然地從頁面的左上角流出，只要碰到文檔的邊界就會換行。它是響應式的，因為內容符合不同的分辨率。](https://i.imgur.com/3q9GMYi.png)

![一開始，boxes 模型看起來很死板，但在為不同的設備和屏幕尺寸創建響應式佈局時，它實際上提供了極大的靈活性。](https://i.imgur.com/HLJRVmx.png)

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

#### 分組 boxes

boxes 模型的一個重要方面是它允許您在其他盒子中插入盒子（即“嵌套”）。這意味著您可以將任何 Webflow 元素拖放到另一個元素中。Webflow 中的所有元素都是可以相互嵌套的盒子。例如，您可以將標題、段落和圖像元素放在容器中。這個容器將這些其他元素組合在一起，每當你移動容器時，它裡面的所有盒子都會出現。

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

#### 嵌套 boxes

當一個盒子的內容增加時，盒子的大小自然也會增加。這意味著通常不需要在元素上設置定義的高度——相反，我們可以讓內容決定高度。

但是我們如何在元素之間創建間距呢？這就是 margin 和 padding 的用武之地。margin 在盒子外面創造空間，把其他盒子推開，而 padding 在盒子裡面創造空間 。這可以應用於任何 boxes —— 一個包含其他 boxes（“父”元素）的 boxes，或者裡面的 boxes（“子”元素）。

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

#### 垂直和水平堆疊

您可以通過向頁面添加內容並調整填充和邊距來創建一個簡單的網站。但是您通常需要元素水平分佈或在屏幕上的特定位置分佈。這就是不同的佈局技術發揮作用的地方。顯示設置控制元素的默認顯示或佈局行為，定位屬性控制其他佈局行為。