Div块

Div块是创建网站时使用的最基本和最通用的元素。按钮、容器和节都是具有特定额外属性的Div块。在某种程度上，Div块可以是您想要的任何形式。例如，Div块可以用来创建空格或用作分隔符，但Div块最常见的用途是将其他元素分组在一起。它在HTML文档中定义一个分区。

在这节课中:

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

添加一个Div块

您可以从元素面板向Webflow项目添加Div块。在下面的示例中，标题、段落和按钮位于一个节中，但文本是不可辨认的。通过添加一个Div块并将这3个元素拖到里面，就可以将它们作为一个元素进行编辑和控制。将Div块的宽度设置为50%也会将里面的内容设置为50%，从而使文本更容易阅读。

当你在Div块中放置元素时，它会根据里面的内容自动调整大小。

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

样式一个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块转换为Link块

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

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

用Div块在元素之间创建空间

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