结构层次

理解 Webflow 中元素的行为至关重要。这里我们将从三个方面讨论元素的层次结构：

• 放置 — 对象如何相互放置（例如祖先、后代、同级）
• 转移的文本样式 — 文本样式如何从祖先传递给后代
• 维度关系 — 祖先元素和后代元素的尺寸如何相互影响

放置

放置涉及将一个对象定位在另一个对象内。例如，如果将标题定位在 div 内，则该标题现在已放置在 div 内。了解盒子模型。

观察导航器中的位置

在导航器面板中可以最清楚地观察到位置。

一旦放置在 div 内，标题就成为 div 的子元素。添加的其他元素也是 div 元素的子元素。它们也是彼此的对等元素。

 层次结构从 body 开始，body 是所有网站的顶层元素。在 body 正下方，其所有后代元素都略微缩进。水平缩进表示这些元素是后代。对于此级别的元素，其祖先元素是 body。

Body 元素内的 Div 充当嵌套内容的祖先元素。该内容进一步缩进，表明这些元素是 Div 的后代。

观察面包屑栏中的位置

可以查看层次结构的第二个位置是面包屑栏中的画布下方。选择任何元素都可以快速识别其与其祖先的关系。但是，它不会显示同级元素，只会显示其直接祖先以及该祖先的直接祖先等等。

转移的文本样式

当元素具有字体样式时，这些样式会传递给其后代元素和后续后代元素。例如，如果您修改 Body 元素上的字体类型，则其所有后代元素都将继承相同的字体。后代元素可以替换从祖先元素和之前的祖先元素继承的样式。例如，如果您选择一个 div 并修改字体类型，则其所有后代元素都将继承相同的字体。但是，如果您随后选择一个后代元素并更改字体类型，它将替换从父 div 继承的字体。了解有关文本样式继承的更多信息。

样式面板提供了一种直接的方式来识别哪些样式被继承以及从哪里继承。橙色标签和图标表示样式是从祖先元素或更高级别的类或标签继承的。

维度关系

大多数元素的大小是根据其内容来决定的。例如， div 默认情况下没有设置高度。但是，包括元素在内 div 将增加 div的身高。

虽然后代元素会影响其祖先元素的大小，但为祖先元素分配固定高度或宽度将覆盖此设置。这意味着内容将不再影响祖先容器的高度。因此，当该容器中有其他内容时，内容将超出容器范围。探索如何隐藏溢出并将滚动条附加到固定高度容器。