样式面板是进行可视化设计的地方
选择器：接下来的可视化设计的产物应该存到哪里？作用范围有多大呢？这是在设计前可以考虑的问题。默认是组件样式，即紧紧绑定在当前组件上，跟其它组件无关。如果当前组件有类名或者CSS面板中有可以影响到当前组件的选择器，就可以在多个选择器间切换。不同选择器的作用范围不同。
拖拽：填数值的地方都可以通过拖拽来增加/减少数值。比如字体大小，灰色数值表示未设置，值是从父组件继承的，把鼠标移到标签上（font-size）按下鼠标左右拖动（即使拖出屏幕边界了还可以继续拖动，光标会从屏幕另一侧出来），可以看到数值和画布里的字体大小都不断变化。如果有单位的可以点小三角形从下拉框中选择单位后继续拖拽。内边距/外边距/边框可以直接拖拽同时更改四个方向的值，还可以点击输入框在弹窗上拖拽某个方向以更改特定方向的值。圆角还能选8点控制，拖拽任一控制点精确调整。任意拖拽绝对定位中央的灰色方块可以把组件在画布中随意摆布。像背景图/遮罩图/移动变换/阴影都有一个小红点可以任意拖拽的。更多玩法请执行实践逐步解锁。
弹性布局：先在容器组件开启弹性布局，在左侧布局框内移动鼠标观察布局效果，点击确定，或者在右侧下拉框中选择具体布局式；然后用鼠标在子组件布局项目栏的6种自我对齐方式中移动，如果效果满意即可点击确认。详见弹性布局课程（右侧栏有视频，点击【开发】链接直达案例应用上手练习）
网格布局：先在容器组件开启网格布局，在左侧布局框内移动鼠标观察布局效果，添加多行多列模板（向右拖拽repeat）；然后用鼠标在子组件布局项目栏的网格区域中划选一定区域作为子组件的布局位置及其占据的空间大小；下方左侧对齐框内移动鼠标观察对齐效果，或更下方的对齐方式图标中移动，如果效果满意即可点击确认。详见网格布局课程
请移步可视化课程深入学习。