colorUI样式笔记

字体大小#

类名	介绍	实际属性	说明
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 布局#

• 固定尺寸#

  在父级元素类名中添加flex flex-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-	外边距	.padding-	外边距
  .margin-lr-	水平方向外边距	.padding-lr-	水平方向内边距
  .margin-tb-	垂直方向外边距	.padding-tb-	垂直方向内边距
  .margin-top-	上外边距	.padding-top-	上内边距
  .margin-right-	右外边距	.padding-right-	右内边距
  margin-bottom-	下外边距	.padding-bottom-	下内边距
  .margin-left-	左外边距	.padding-left-	左内边距

图标用法#

由于之前在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>