字體大小
| 類名 | 介紹 | 實際屬性 | 說明 |
|---|---|---|---|
| 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>