Skip to main content

​
1. 简介

目前只有图文展示、布局容器、分组组件有样式设置，可以对表单组件进行布局排版，达到更美观的效果

​
2. 功能介绍

​
2.1 源码编辑

当部分 CSS 样式在设置器中无法满足需求的时候，源码编辑支持编写 CSS 样式代码来自定义样式； 源码编辑和右侧的设置器是完全同步更改的，编辑完，即刻生效，两侧同步修改 案例参考：怎么修改单行文本组件的样式大小

​
2.2 默认状态

​
2.3 布局

​
2.3.1 CSS 框模型概述

​
2.3.2 CSS 内边距属性

​
2.3.3 CSS 外边距属性

​
2.3.4 CSS 边框属性

​
2.4 显示

​
2.4.1 block

块级元素，总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示； 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

​
2.4.2 inline-block

内联块元素，和相邻的内联元素在同一行，表现为同行显示； 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

​
2.4.3 inline

内联元素，和相邻的内联元素在同一行； 宽度(width)、高度(height)、内边距的**top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)**都不可改变，就是里面文字或图片的大小；

​
2.4.4 flex（非技术同学尽量使用分栏布局排版）

弹性布局，可以简便、完整、响应式地实现各种页面布局。 flex布局的元素，称为flex容器，容器默认存在两根轴：水平的主轴和垂直的交叉轴。 Direction：row 主轴为水平方向，起点在左端（默认值） Direction：column 主轴为水平方向，起点在右端 Direction：row-reverse主轴为垂直方向，起点在上沿 Direction：column-reverse主轴为垂直方向，起点在下沿 Align：flex-start 交叉轴的起点对齐 Align：flex-end 交叉轴的终点对齐 Align：center 交叉轴的中点对齐 Align：baseline 项目的第一行文字的基线对齐 Align：stretch 如果项目未设置高度或设为 auto，将占满整个容器的高度（默认值） Justify：flex-start 左对齐（默认值） Justify：flex-end 右对齐 Justify：center 居中 Justify：space-between 两端对齐，项目之间的间隔都相等 Justify：space-around每个项目两侧的间隔相等。 注：详细教程请见 Flex布局语法教程

​
2.5 文字

(1) 字体：文字的字体； (2) 字重：文字的粗细； (3) 样式：文字的样式（正常、斜体）； (4) 颜色：文字的颜色； (5) 大小：文字的大小； (6) 行高：文字所在行的高度； (7) 对齐：文字的对齐方式（左对齐，居中，右对齐，两端对齐）； (8) 修饰：文字修饰（正常，下划线，删除线）。

​
2.6 背景

(1) 填充色：背景的颜色； (2) 图片：以图片作为背景。

​
2.7 边框

(1) 线型：边框的线型（实线、点线、虚线）； (2) 宽度：边框的宽度； (3) 颜色：边框的颜色； (4) 圆角：边框圆角的大小。

​
2.8 效果

(1) 透明度：元素的透明效果，值越小越透明； (2) 鼠标手势：鼠标在该元素上展示的鼠标样式（指针、手势）。

​
2.9 阴影

(1) 颜色：阴影的颜色； (2) X：阴影在水平方向的偏移； (3) Y：阴影在垂直方向上的偏移； (4) Blur：阴影模糊距离,值越大阴影的边缘就越模糊； (5) Spread：阴影扩展半径,如果值为正则整个阴影都延展扩大,值为负则缩小。
😋如果上述帮助文档未能解决您的问题，请联系 幸福的棉花糖