介绍框模型

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

工具像Photoshop或幻灯片让您在给定文档位置的元素。网络布局是基于内容垂直叠加,像在一个文档段落。

在这节课中:

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

理解盒子

所有元素都是盒子。这个web页面上的每个元素都被视为一个盒子,想象一个无形的边界周围的每个元素。这些箱子很自然地坐在彼此彼此或堆栈的顶部,这取决于它们的属性。

使用响应盒子的设计

网页内容不像幻灯片或Photoshop文件,可以手动定位元素。这些文件不响应,查看创建的内容在一个决议。

相反,网络布局表现得更像一个Word文档,页面的内容从左上的自然流动,包装的时候点击文档的边界。它的响应,因为内容符合不同的决议。

起初,框模型听起来刚性,但它实际上提供了巨大的灵活性在创建响应为不同设备布局和屏幕大小。

了解更多关于响应设计。

分组框

盒模型的一个重要方面是,它允许您插入框内其他盒子(即。,“鸟巢”)。这意味着您可以将任何Webflow元素到另一个元素。所有的元素Webflow的盒子,可以相互嵌套的内部。例如,您可以将标题,段落和图像元素内容器。这个容器组这些其他的元素放在一起,当你移动容器,所有的箱子里面出现。

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

嵌套盒

当一个盒子的内容增加,盒子的大小自然增加。这意味着通常不需要设置定义高度的元素——相反,我们可以让内容决定高度。

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

垂直和水平叠加

你可以创建一个简单的网站可以通过添加页面内容和调整填充和保证金。但是你会经常需要元素分配水平在屏幕上或在一个特定的地方。这就是不同的布局技术发挥作用。显示设置默认显示或控制布局元素的行为,和定位属性控制其他布局行为。