微搭提供组件样式快捷编辑功能，在 微搭应用编辑器 中选中组件之后，在编辑器的右侧可以看到属性配置区域和样式配置区域，单击样式页签，可进行组件样式的个性化配置，基础的样式配置包含文字、布局、填充、高级，支持通过样式代码编辑器和自定义两种方式灵活的对样式进行配置。以下对样式配置功能做详细介绍说明：
文字
可调整文字的字号、字色、字重、行高，对齐方式。
字号：可以手动输入字号调整文字大小。
字色：可以单击选择文字颜色。
字重：字重分为粗、正常、细三种。
行高：可以手动输入数字调整文字所在行高度。
对齐：文字的对齐方式（左对齐，居中，右对齐，两端对齐）。
说明：
当文字只有一行时，样式代码编辑器中 text-align 修改为 text-align-last 两端对齐生效。
布局
通过布局可以调整组件的宽高尺寸和内外边距，可以配置容器中多个组件的排列和对齐方式，可以控制组件的隐藏布局。
宽高尺寸：可设置组件宽度和组件高度，目前提供 px、rpx、% 和 rem 下拉可选单位。
内外边距：支持输入数值设置组件上下左右的外边距（margin）和内边距（padding）。
隐藏布局：单击下图的图标可设置组件在编辑器中隐藏布局（display：none），再次单击该图标可取消隐藏布局。
布局模式：布局模式分为排列和对齐。排列可选择默认、横向排列、纵向排列；对齐可选择：左对齐、水平居中、右对齐、平分、上对齐、垂直居中、下对齐。布局模式一般不针对单个组件设定，多用于一个容器中有多个组件的场景，例如一个普通容器中我们放了多个按钮组件，想要实现按钮在容器中水平平分，我们可以选中普通容器，设置横向排列、平分，效果如下图：
说明：
所有组件初始化拖进编辑器中我们都会选中默认布局，当选择了某个布局模式之后，想要恢复默认布局，只需要再次单击您的选中项目，即可取消选中。
填充
填充包含边框配置、背景配置、阴影配置、圆角配置、透明度配置。
边框：默认无边框，支持配置边框颜色、边框类型（实线或虚线）、边框宽度，单击下图中边框关联配置图标可取消边框宽度关联，可以单独配置任何一个边框的宽度（系统会默认关联，即配置一条边框宽度后适用于所有边框宽度）。
背景：默认无背景，可选择颜色背景和图片背景。可以选择指定某一种颜色作为背景，也可以选择特定的图片作为背景。
阴影：默认无阴影，可配置组件的外阴影，X 表示水平阴影位置（数值可以为负值），Y 表示垂直阴影的位置（数值可以为负值），扩展表示阴影的尺寸值，距离表示阴影的模糊距离，可以灵活调整各项数值配置合适的组件阴影。
圆角半径：支持配置圆角的半径，输入的数值越大，圆角效果越明显，和边框类似，圆角支持统一配置四个圆角，支持配置某一个独立圆角。
不透明度：配置组件显示的透明度，100%为完全不透明，0%为完全透明。
高级
高级-定位
定位：配置多个组件在页面中的相对和绝对位置（层叠显示或不层叠显示），把某个组件固定在页面中、页面滚动组件固定不动、或者有多个重叠组件想让某些组件优先展示，可通过定位来控制。配置了相对、绝对、固定定位之后，支持配置组件基于当前定位的四边边距。微搭低代码应用编辑器提供以下四种定位方式：
默认：static，静态定位，组件按照 Normal Flow（标准流、文档流、常规流、正常流）进行排布，left、right、top、bottom 设置无效。
相对：relative，组件按照 Normal Flow（标准流、文档流、常规流、正常流）进行排布，可以通过 left、right、top、bottom 设置，定位参照对象是自己原来的位置。使用相对定位的组件不脱档，即组件原本占用的空间仍保留（后面组件不会贴上来）。
绝对：absolute，组件脱离 Normal Flow（标准流、文档流、常规流、正常流），可以通过 left、right、top、bottom 设置，定位参考对象是相邻的父元素，如果找不到父级元素，参考对象就是整个页面；在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位，如果希望子元素相对于父元素进行定位，又不希望父元素脱标，那就设置父组件为相对定位，子组件为绝对定位，即一般可使用子绝父相的配置。
固定：固定定位可以理解为一种特殊的绝对定位，组件脱离 Normal Flow（标准流、文档流、常规流、正常流），可以通过 left、right、top、bottom 设置，定位参考对象是整个页面；当页面滚动时，组件悬浮固定不动。
层级：提供上移下移置顶置底的层级选择，对于开启定位的组件，可以通过上移下移置顶置底按钮控制组件的 z-index 属性来指定组件的层级，组件层级越高的越优先显示。组件新拖入编辑器中，层级都一样的情况下可以先操作上移（z-index+1）下移（z-index-1），然后可以单击置顶（判断当前页面中组件的最大 z-index，进行 +1 处理）置底（判断当前页面中组件的最小 z-index，进行 -1 处理）如果组件层级一样，则优先显示后面添加的组件，父组件层级高于子组件时，也不会盖住子组件。
高级-style 绑定
style 绑定：可以通过 style 直接绑定表达式、绑定变量的方式灵活进行样式配置，提供示例如下：
1. 先添加一个按钮组件，选中该组件后单击 style 绑定。表达式中输入颜色和背景的对象代码：
{color:"red",background:"orange"}。注意：
style 仅支持绑定对象。
2. 单击表达式输入框右上角完成，可以看到按钮组件文本变为红色，背景变为橙色。
3. 当组件样式需要通过事件进行修改时，可使用 style 绑定变量的方式实现，组件样式通过事件修改实例可参见 组件样式如何通过事件修改。
高级-classname
classname 选择或 classname 绑定，需要定义整个应用级别或者页面级别的某些通用样式，整个应用或者页面的所有组件都可以快捷选择该样式。可以直接关联定义好的 classname 参数进行样式配置，提供示例如下：
首先需要在代码编辑器中定义样式 classname 参数（eg：字号50px，行高200px）。
.button-font-size {font-size: 50px;}.button-line-height {line-height: 200px;}
然后添加一个文本组件，文本组件的 classname 选项选择代码编辑器中定义的内容（支持多选），选择后组件效果如下，字号变为了50px，行高变成了200px：
说明：
单个页面 style 中定义 classname 参数：classname 参数适用于当前页面，只有该页面中组件设定 classname 时可以选择。
全局 style 中定义 classname 参数：classname 参数适用于所有页面，所有页面组件设定 classname 时都可以选择。
同样的我们可以通过后面的绑定按钮进行参数的绑定：
CSS
样式面板的配置和 CSS CODE 为内容双向同步，可在 CSS CODE 中直接编写、修改样式代码来定义组件样式。
