字体大小
| 类名 | 介绍 | 实际属性 | 说明 |
|---|---|---|---|
| text-xsl | 特大号字 | font-size: 120rpx; | 用于图标、数字等特大显示 |
| text-xs | 说明文本 | font-size: 20rpx; | 说明文本，标签文字等关注度低的文字 |
| text-sl | 较大号字 | font-size: 80rpx; | 用于图标、数字等较大显示 |
| text-xxl | 特殊字 | font-size: 44rpx; | 用于金额数字等信息 |
| text-xl | 页面大标题 | font-size: 36rpx; | 页面大标题，用于结果页等单一信息页 |
| text-lg | 页面小标题 | font-size: 32rpx; | 页面小标题，首要层级显示内容 |
| text-df | 正文 | font-size: 28rpx; | 页面默认字号，用于摘要或阅读文本 |
| text-sm | 辅助信息 | font-size: 24rpx; | 页面辅助信息，次级内容等 |
文字对齐
| 类名 | 介绍 | 实际属性 |
|---|---|---|
| text-left | 特大号字 | text-align: left; |
| text-center | 较大号字 | text-align: center; |
| text-right | 特殊字 | text-align: right; |
flex 布局
-
固定尺寸
在父级元素类名中添加
flexflex-wrap之后，在子级元素类名添加以下类名即可。类名 介绍 实际属性 basis-xs 20%宽度 flex-basis: 20%; basis-sm 40%宽度 flex-basis: 40%; basis-df 50%宽度 flex-basis: 50%; basis-lg 60%宽度 flex-basis: 60%; basis-xl 80%宽度 flex-basis: 80%; -
比例布局
在父级元素类名中添加
flex之后，在子级元素类名添加以下类名即可。类名 介绍 实际属性 flex-sub 相同宽度 flex: 1; flex-twice 两倍宽度 flex: 2; flex-treble 50%宽度 flex: 3; -
水平对齐
在父级元素类名中添加
flex，同时添加以下类名即可。类名 介绍 实际属性 justify-start 左对齐（默认值） justify-content: flex-start; justify-end 右对齐 justify-content: flex-end; justify-center 居中 justify-content: center; justify-between 两端对齐，项目之间的间隔都相等。 justify-content: space-between; justify-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 justify-content: space-around; -
垂直对齐
在父级元素类名中添加
flex，同时添加以下类名即可。类名 介绍 实际属性 align-start 起点对齐 align-items: flex-start; align-end 终点对齐 align-items: flex-end; align-center 中点对齐 align-items: center; -
内外边距
内外边距一共有五种尺寸，{size}*类名分别为：
xs，sm，df，lg，xl，分别从*10rpx，20rpx，30rpx，40rpx，50rpx。类名 介绍 类名 介绍 .margin-{size} 外边距 .padding-{size} 外边距 .margin-lr-{size} 水平方向外边距 .padding-lr-{size} 水平方向内边距 .margin-tb-{size} 垂直方向外边距 .padding-tb-{size} 垂直方向内边距 .margin-top-{size} 上外边距 .padding-top-{size} 上内边距 .margin-right-{size} 右外边距 .padding-right-{size} 右内边距 margin-bottom-{size} 下外边距 .padding-bottom-{size} 下内边距 .margin-left-{size} 左外边距 .padding-left-{size} 左内边距
图标用法
由于之前在app.wxss引入了icon.css，因此在这里要使用的话，直接用即可。
使用方法：
text标签，类名：cuIcon-{{name}}
<!--page.wxml-->
<text class="cuIcon-apps text-gray"></text>
其中，colorui的图标，大部分是有两个模式的，一个普通状态，一个fill状态。fill状态直接在普通状态的名字后面加上fill即可。
shadow-warp 用来给周围添加阴影
margin和padding的区别
margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）
padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）
（1）padding-left:10px; /margin-left:10px; 左内/外边距
（2）padding-right:10px; /margin-right:10px; 右内/外边距
（3）padding-top:10px; /margin-top:10px; 上内/外边距
（4）padding-bottom:10px; /margin-bottom:10px; 下内/外边距
（5）padding：10px;/ margin:10px; 四边统一内/外边距
（6）padding:10px 20px; /margin:10px 20px; 上下、左右内/外边距
（7）padding:10px 20px 30px;/margin:10px 20px 30px; 上、左右、下内/外边距
（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距
solid-right 是用来给元素右边加一条竖线 ，同理solid-bottom 是给下边添加一条横线
margin-top-sm 是让元素向上有一个外边距，同理 margin-tb-sm 是向下有个外边距
shadow-blur 是根据背景图片散发阴影
flex-direction 是 flex-direction:column 的意思，也就是保证元素呈现下面的排列（上下排列）：
在微信小程序开发官网中这样解释：
圆角样式(border-radius)
首先先将内容方块区域大小显示出来，然后在方块的四个角贴上你设置的半径大小的四个圆，将边角超出圆的区域隐藏，就是圆角样式的最终呈现效果。
圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样的图形出来
四个属性值：Border-radius：50px 30px 80px 150px;两个属性值：左上 右上 右下 左下
Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?tdsourcetag=s_pcqq_aiomsg
当一个view元素不能伸展到最下方的时候，在该view底部代码添加如下代码可以让其伸展到最下边(目前不知道为什么可以这样)：
<view class="cu-bar">
</view>