通用特性

页面结构

我们知道，任何一个页面都是由HTML标签通过并列、嵌套的关系组成的树状结构——DOM树。在这棵树上，有些节点是用户可见的，有些则不可见。

海牛低代码平台的页面编辑器中虽然不直接使用HTML标签，但其使用组件来搭建页面的基本思路与HTML代码是一致的。我们可以在页面编辑区直接操作用到的组件，但有时候可能会不太容易定位一些不可见的组件，比如透明容器。这种时候我们就需要用到编辑器的「大纲」功能：左上角的 #

下图所示的是一个较复杂的页面，打开的大纲栏中显示了完整的组件树。大纲栏开关（#）的右侧是面包屑：表示当前选中组件在组件树上的位置路径。

组件树不仅展示了页面中所有组件的关系，而且提供了方便的拖拽功能，在这里拖动修改组件位置关系与在编辑区拖动修改的效果一样，建议在编辑页面时固定大纲栏（大纲栏右上角图钉）。

任何一个组件被选中时都会弹出如图所示的尺寸设置：自定义宽高、宽度适应内容、宽度填充、高度适应内容、高度填充。

这些属性并非在所有组件上都适用，比如文本组件只支持宽度设置、自定义容器支持所有设置，具体因组件而异。

内边距和外边距是重要的样式属性，它们为页面元素提供了间距。

间距是页面设计中不容忽视的重要属性，它可以让相关元素放在一起，无关元素分开，从而让用户快速识别信息模块，理解内容之间的逻辑关联。比如一个商品的图片、名称、价格等信息要与其他商品的拉开距离，形成区分。

外边距使组件与其他组件拉开距离，其设置方式也相当简单：选中组件，拖动上下左右的四个淡紫色小条，或者双击并输入数值。

内边距可使组件边框与内容之间拉开距离，它是在组件的样式设置面板中进行设置的。如图所示：

如果样式配置面板提供的选项不满足需求，可以直接使用代码编辑或JS动态样式的方式，参考手写样式和JS动态样式，这种方式可以一次性完成内外边距的设置。

组件库中有些组件是容器性质的，它们可以容纳其他的组件。所有这种组件，以及页面本身都支持一个重要设置：布局。

布局设置

布局设置可以使放入其中的组件按照这些方式进行排版：

通常建议使用横向和纵向排版。在这两种方式下，我们可以设置内部元素的水平垂直对齐方式、均匀分布、两段分布、行列间距：

支持内容布局设置的组件有：布局、卡片、标签页、自定义容器、步骤条。