結構層次

了解 Webflow 中元素的行為至關重要。這裡我們從三個面向來討論元素的層次結構：

• 放置 — 物件如何放置在彼此內部（例如祖先、後代、同儕）
• 轉移的文字樣式 — 文字樣式如何從祖先傳遞到後代
• 尺寸關係 — 祖先元素和後代元素的維度如何相互影響

放置

放置涉及將一個物件放置在另一個物件內。例如，如果標題位於 div 內，則該標題現在已放置在 div 內。了解盒子模型。

觀察導航器中的位置

在導航面板中可以最清楚地觀察到放置位置。

一旦定位在 div 內，標題就會成為 div 的子元素。新增的其他元素也是 div 元素的子元素。他們也是同行。

 層次結構從正文開始－所有網站的頂層元素。就在其正下方，其所有後代元素都略微縮排。水平縮排表示元素是後代。對於這個層次的元素來說，它們的祖先元素就是身體。

Body 元素中的 Div 可作為其中內容的祖先元素。內容進一步縮進，顯示這些元素是 Div 的後代。

觀察麵包屑欄中的位置

可以查看層次結構的第二個位置是麵包屑導覽列中畫布下方。選擇任何元素都可以快速識別其與其祖先的關係。但是，它不會顯示對等元素，僅顯示其直接祖先以及該祖先的直接祖先，依此類推。

轉移的文字樣式

當元素具有字體樣式時，這些樣式將傳遞到其後代元素和後續後代元素。例如，如果修改 Body 元素上的字體類型，則其所有後代元素將繼承相同的字體。後代可以取代從祖先和先前祖先繼承的風格。例如，如果您選擇一個 div 並修改字體類型，則其所有後代將繼承相同的字體。但是，如果您隨後選擇一個後代元素並更改字體類型，它將替換從父 div 繼承的字體。了解有關文字樣式繼承的更多資訊。

樣式面板提供了一種簡單的方法來識別正在繼承哪些樣式以及從何處繼承它們。橙色標籤和圖示表示樣式是從祖先元素或更高級的類別或標籤繼承的。

尺寸關係

大多數元素的大小會根據其內容而定。例如， 分割區 預設沒有設定高度。然而，包括a中的元素 分割區 將增加 分割區的身高。

雖然後代會影響其祖先元素的大小，但為祖先元素分配固定的高度或寬度將覆蓋它。這意味著內容將不再影響祖先容器的高度。因此，當該容器中有附加內容時，內容將延伸到容器之外。探索如何隱藏溢出並將捲軸附加到固定高度的容器。