元素层次结构

理解元素在Webflow中的行为是很重要的。在这里，我们将以三种方式介绍元素层次结构:

• 嵌套对象之间如何嵌套(例如父母，孩子，兄弟姐妹)
• 继承了文本样式-文本样式如何从父母传递给孩子
• 大小的关系—父元素和子元素的大小如何相互影响

嵌套

嵌套是将一个对象放在另一个对象中。例如，如果一个Heading放置在一个节中，那么该Heading现在已经嵌套在该节中。阅读盒子模型．

在导航器中查看嵌套

嵌套最容易在导航器面板。

一旦嵌套在节中，标题就是节的子元素。添加的其他元素也是Section元素的子元素。他们也是彼此的兄弟姐妹。

层次结构从主体开始——所有网站的顶层元素。在它的正下方，它的所有子元素略微缩进。水平缩进表示元素是子元素。对于这一层的元素，它们的父元素是Body。

Body元素中的section是嵌套在其中的内容的父元素。内容的缩进更大，这表明这些元素是Section的子元素。

查看面包屑栏嵌套

第二个我们可以看到等级的地方是在帆布在面包屑栏。您可以选择任何元素来快速确定其与父元素的关系。但是，它不会显示兄弟元素，只显示其直接父元素和该元素的直接父元素，以此类推。

继承了文本样式

当元素具有排版样式，这些样式会传递给它的子元素和孙元素。例如，如果编辑Body元素上的字体族，它的所有子元素将继承相同的字体族。孩子可以重写从父母和祖父母那里继承来的样式。例如，如果您选择一个区域并编辑字体族，它的所有子区域将继承相同的字体族。但是，如果您随后选择了一个子元素并编辑字体家族，它将覆盖从父节继承的字体家族。了解更多关于文本样式继承的知识。

样式面板提供了一种简单的方法来确定继承了哪些样式，以及它们是从哪里继承的。橙色标签和图标表示样式是从父元素或更高的类或标记继承的。

大小的关系

大多数元素的大小是由它们内部的内容决定的。例如,部分默认情况下没有定义高度。但是，在部分将使部分较高。

虽然子元素会影响父元素的大小，但给父元素设置高度或宽度将会覆盖这一点。这意味着，内容将不再影响父包装器(section, container, div.)的高度。并且，当包装器中有更多的内容时，内容将溢出包装器。了解如何隐藏溢出并向固定高度的包装器添加滚动条．