盒子模型的介绍

盒子模型描述了网页布局是如何工作的。

Photoshop或PowerPoint等工具允许您在给定文档中的任何位置放置元素。网页布局是基于垂直的内容堆叠，就像文档中的段落一样。

在这节课中:

1. 理解盒子
2. 使用盒子进行响应式设计
3. 分组框
4. 嵌套盒

理解盒子

所有元素都是方框。这个网页上的每个元素都被当作一个盒子——想象每个元素周围都有一个看不见的边界。根据它们的属性，这些盒子自然地彼此相邻或堆叠在一起。

使用盒子进行响应式设计

Web内容不像PowerPoint或Photoshop文档那样，元素可以手动定位在任何地方。这些文档没有响应—创建的内容是为了在一个分辨率下查看。

相反,网络布局行为更像一个Word文档——内容自然地从页面的左上角流动，每当它到达文档的边界时就换行。它的响应性很强，因为内容符合不同的分辨率。

起初，盒子模型听起来僵硬，但它实际上提供了巨大的灵活性，为不同的设备和屏幕尺寸创建响应式布局。

了解更多关于响应式设计的知识。

分组框

框模型的一个重要方面是，它允许您在其他框中插入框(即“嵌套”它们)。这意味着您可以将任何Webflow元素放到另一个元素中。所有的元素在Webflow中是可以互相嵌套的盒子。例如，您可以将标题、段落和图像元素放在容器．这个容器将这些其他元素组合在一起，每当您移动容器时，其中的所有方框都会随之移动。

了解关于元素层次结构的更多信息。

嵌套盒

当盒子里的东西增加时，盒子的大小自然也会增加。这意味着通常不需要在元素上设置定义的高度——相反，我们可以让内容来决定高度。

但是我们如何创造空间呢之间的元素?这就是保证金和填充进来。利润创造空间外一个盒子，把其他盒子推开，填充创造了空间内部一个盒子里。这可以应用于任何框—包含其他框(“父”元素)的框，或其中的框(“子”元素)。

垂直和水平堆放

你可以创建一个简单的网站，只要添加内容到一个页面，并调整填充和空白。但通常需要将元素水平分布或分布在屏幕上的特定位置。这就是不同的布局技术发挥作用。显示设置控制元素的默认显示或布局行为，以及定位属性控制其他布局行为。