布局排版

单位

为实现页面在设计时和运行时的 ui 一致性，运行时不同分辨率下 ui 的一致性，云智开发平台采用响应式 rem 为单位，基准分辨率为 1920px。在基准分辨率下 rem 与 px 的兑换比例为 1rem = 100px，其他分辨率下兑换比例依次来计算：

  1rem = (实际分辨率 / 基准分辨率) * 100 px

布局

云智开发平台采用的布局方式为定位布局，每个节点有 w、h、l、t 来确定节点的位置及排布。其中 w 为节点宽度，h 为节点高度，l 为节点相对于其参考节点在 x 轴方向的偏移，t 为节点相对于其参考节点在 y 轴方向的偏移。每个节点的参考节点均为其父级节点，顶级节点的参考节点为画布根节点。

跨容器拖拽

组件节点的布局属性均是以其父节点为参照物计算的，如下例, B 组件是 A 组件的子节点，B 的位置是相对于 A 来计算的，将 B 组件拖入 C 组件后，B 称为了 C 的子节点，这时 B 的位置是相对于 C 来计算的。

吸附对齐与对标线

组件在拖拽过程中，系统会动态计算距离最近的节点，并呈现出与当前活动节点之间的对标线以及距离块，并显示其距离。每个节点的对标线有 x 轴方向的左、中、右，y 轴方向的上、中、下一共 6 条。活动节点在运动过程中系统会动态计算并显示相应的标线。

组件位置调整及对齐

一般情况下调整组件位置主要是通过鼠标拖动组件位置即可，需要微调时，选中组件，按键盘的上、下、左、右键可进行微调。需要对齐时，按 control 键点击可多选组件，然后在工具栏中选择对齐方式。