Div块

一个Div块是最基本的和通用的元素，当构建一个网站。按钮、容器和节都是带有某些额外属性的Div块。在一定程度上，Div块可以是您想要的任何内容。例如，Div块可用于创建空间或作为分隔符，但Div块最常见的用途是将其他元素组合在一起。它在HTML文档中定义了一个分部。

在这节课中:

1. 添加一个Div块
2. 样式a Div块
3. 嵌套一个Div块
4. 复制一个Div块
5. 将Div块转换为链接块
6. 创建Div块元素之间的空间

添加一个Div块

您可以在Elements面板中为Webflow项目添加一个Div块。在下面的例子中，标题、段落和按钮都在一个节中，但是文本是不可读的。通过添加一个Div块并拖动这3个元素，它们可以作为一个编辑和控制。设置Div块的宽度为50%也将设置内部的内容为50%，并使文本更易读。

当您在Div块内放置元素时，它将根据内容自动调整大小。

在下面的例子中，Div块现在包含了其中的元素。将Div块居中也将使其内容居中。

样式a Div块

您可以使用右侧的样式面板对Div块进行样式设置。例如，一个Div块可以有一个背景颜色或投影。您也可以给Div块填充添加Div块的边缘和内容之间的空间。你可以按住Shift键并拖动来调整填充(如下例所示)，同时拖动四个边来同时调整。

巢Div块

还可以将Div块放在其他Div块中。下面是一个例子，其中一个Div块被拖到另一个和样式看起来像一个水平分隔符。

1. 降低新Div块变成一个现有的
2. 设置宽度为100px，高度为2px
3. 调整页边距来创造空间
4. 添加背景颜色

复制一个Div块

您可以复制一个Div块及其内容。有两种方法:

重复与右击

1. 右键单击Div块(右键点击元素标签，如果很难找到空白点击Div块内)
2. 选择重复的

重复与快捷键

1. 选择Div块
2. 新闻命令+ C(在Mac)或控制+ C(在Windows上)复制
3. 新闻命令+ V(在Mac)或控制+ V(在Windows上)粘贴

当您复制一个Div块时，与任何元素一样，您也复制了附加到它的类和样式。您对一个Div块所做的任何样式更改将影响所有其他具有相同类名的Div块——无论它们在同一页或另一页上。

在复制一个Div块之后，您可以将其拖动到页面上的另一个位置—比如一个节、容器或另一个Div块。你也可以按命令+ X(在Mac)或控制+ X(在Windows)削减，选择元素你想Div块在，然后按命令+ V(在Mac)或控制+ V(在Windows上)粘贴到所选元素的底部。

将Div块转换为链接块

您可以将Div块转换为链接块，以便将其及其内容链接到其他资源。当您意识到在布局中对内容进行分组时使用了Div块而不是Link块时，这是很有帮助的。

要将Div块更改为Link块，请确保该Div块不包含任何链接元素，然后右键单击该Div块并将其转换为Link块。

创建Div块元素之间的空间

您可以使用Div块在其他元素之间创建一个空白(给它设置一个高度或宽度，以推动其他内容)。然而，这种方法并不是创造空间的理想方法，而且随着时间的推移很难跟踪。作为一般规则，最好使用边距或填充来创建元素之间的空间，只有在绝对必要时才使用Div块。