CSS类
提醒
本css库不是必选文件，如果你在app.uvue安装的时候没有引入，不需要查看本教程。
如果你有自己的原子css库插件，你可以不引用本css库，可以删除不影响组件
前置说明
你必须在app.uvue中已经引入！！！
在可以写class的组件上即可填写，本质上这是一个css类库，为了方便大家提高布局效率而开发出来。可以兼容全部平台，而无需担心在原生上报错，已经作了兼容。
建议布局尽量使用本css库类，95%可以满足你的日常布局，让你无需写一行样式表就可以完成一个全平台的应用软件
如果发现了纰漏请及时通知我。
杂类
| 类名 | 作用说明 |
|---|---|
| overflow | 溢出隐藏。 |
| overflow-x | 横轴溢出隐藏，Y轴自动（滚动条） |
| overflow-y | 竖向溢出隐藏，X轴自动（滚动条） |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定悬浮 |
| fulled | 宽度100% |
| fulled-height | 高度100% |
| d-block | 使元素变为块联即占一行 |
| vertical-align-[x] | x=[top/middle/bottom]内联对齐方式,如：vertical-align-top顶部对齐 |
| wrap | 断行，包括内联元素和单词，数字全部强制断行 |
| nowrap | 不断行，使用内联元素形成一排 |
文本类
| 类名 | 作用说明 |
|---|---|
| text-delete | 删除线 |
| text-underline | 下划线 |
| text-size-[x] | 文本大小x可能的值为：xxs,xs,s,n,g,lg,xl，例如中号:text-size-n |
| text-weight-[x] | 粗细，x可能值为：细s,正常n,加粗b |
| text-align-[x] | 文本对齐 。text-align-left,right,center |
| text-overflow | 超过一行末尾省略号 |
| text-overflow-[x] | x=[1-5],最多几行出现省略号 |
圆角
| 类名 | 作用说明 |
|---|---|
| round-[x] | 圆角,x=[0-25],比如：round-10 |
圆角的其它辅助特性。round-tl-[上面的数值] 如：round-tl-10
| tl | tr | bl | br | a | t | b | l | r |
|---|---|---|---|---|---|---|---|---|
| 顶左 | 顶右 | 底左 | 底右 | 全部 | 顶左和顶右 | 底左和底右 | 顶左和底左 | 顶右和底右 |
透明度
| 类名 | 作用说明 |
|---|---|
| opacity-[x] | 透明,x=只能是整数0,1,2,3,4,5,6,7,8,9对应0.0~0.9 |
zIndex层级
| 类名 | 作用说明 |
|---|---|
| zIndex-[x] | x=[0-25]如：zIndex-5,=>z-index:5 |
| zIndex-n[x] | x=[0-25],其中n=4,如：zIndex-n5,=>z-index:20 |
Flex综合排版
| flex-start | flex-end | flex-center | flex-between | flex-around | flex-reverse |
|---|---|---|---|---|---|
| 居中左对齐 | 居中右对齐 | 居中对齐 | 居中两边对齐 | 居中均分 | 行内反转内容 |
| flex-row | flex-col | flex | flex-wrap | flex-shrink |
|---|---|---|---|---|
| 横向排列 | 纵向行排列 | flex布局 | 自动断行 | 保证宽度不受挤压 |
| flex-[x] |
|---|
| [x]=0-12，flex布局 |
在flex-row排列一排时，如果内部只有一元素flex-1就是占比1即100%,占比2就是20%依此类推
Flex-row排版
需要配合flex flex-row类，加上本类比如：
其它类推组合
| flex-row-top-start | flex-row-top-center | flex-row-top-end |
|---|---|---|
| 上左对齐 | 上中对齐 | 上右对齐 |
| flex-row-center-start | flex-row-center-center | flex-row-center-end |
|---|---|---|
| 中左对齐 | 中对齐 | 中右对齐 |
| flex-row-bottom-start | flex-row-bottom-center | flex-row-bottom-end |
|---|---|---|
| 底左对齐 | 底中对齐 | 底右对齐 |
| flex-row-center-between |
|---|
| 上下居中，两边对齐。 |
Flex-col排版
需要配合flex flex-col类，加上本类比如：
其它类推组合
| flex-col-top-start | flex-col-top-center | flex-col-top-end |
|---|---|---|
| 左上对齐 | 左中对齐 | 左右对齐 |
| flex-col-center-start | flex-col-center-center | flex-col-center-end |
|---|---|---|
| 中左对齐 | 中对齐 | 中右对齐 |
| flex-col-bottom-start | flex-col-bottom-center | flex-col-bottom-end |
|---|---|---|
| 底左对齐 | 底中对齐 | 底右对齐 |
| flex-col-full |
|---|
| 两边拉齐，使用纵向内的元素宽100% |
在flex-col纵向排时，如果内部只有一元素flex-col-full就是宽度100%
基线对齐
| flex-row-baseline-start | flex-row-baseline-center | flex-row-baseline-end |
|---|---|---|
| baseline项目基线（row时是顶，col时是左） | baseline项目基线（row时是中，col时是中） | baseline项目基线（row时是底，col时是右） |
位置控制
| t | l | r | b |
|---|---|---|---|
| 上top | 左left | 右right | 底bottom |
规则示例 注意:px单位的css文件n=2,rpx单位的文件n=4,注意区别 因为按设计标准100rpx = 50px,按这个转换的 t-x* 表示正数，x=0-50，比如：t-24，表示顶部偏移24rpx，等于：top:24rpx;
t-nx 表示正数*4的倍数，x=0-25,比如：t-n10，表示向上偏移40rpx，等于：top:40rpx;
t--x 表示负数，x=0-50，比如：t--24，表示向上偏移24rpx，等于：top:-24rpx;
t--nx 表示负数，x=0-25，比如：t--n10，表示向上偏移40rpx，等于：top:-40rpx;
其它类推。
外边距
| 类名 | 方向 | 值 | 示例 |
|---|---|---|---|
| m | a | 0-50 | ma-10,四周边距为10upx |
规则为 m方向-值即可。
可选的方向
| a | l | r | t | b | x | y |
|---|---|---|---|---|---|---|
| 四周 | 左 | 右 | 顶 | 底 | 水平左右 | 竖向上下 |
注意:px单位的css文件n=2,rpx单位的文件n=4,注意区别 因为按设计标准100rpx = 50px,按这个转换的
外边距如果觉得数据不够用嫌小，还可以这样使用m方向-n值比如外边距40可以写成：ma-n10，n*4倍的数据，n为1-25
负数外边距
还可以使用负方向
规则和上方样，需要加上-号。比如向上负：mt--24,表示负24rpx，ml-n10表示向左负40rpx
内边距
| 类名 | 方向 | 值 | 示例 |
|---|---|---|---|
| p | a | 0-50 | pa-10,四周内边距为10rpx |
规则为p方向-值即可。
可选的方向
| a | l | r | t | b | x | y |
|---|---|---|---|---|---|---|
| 四周 | 左 | 右 | 顶 | 底 | 水平左右 | 竖向上下 |
注意:px单位的css文件n=2,rpx单位的文件n=4,注意区别 因为按设计标准100rpx = 50px,按这个转换的
内边距如果觉得数据不够用嫌小，还可以这样使用p方向-n值比如内边距40可以写成：pa-n10，n*4倍的数据，n为1-25
颜色类
内置了常见的颜色及对应的状态颜色 状态类
| 类名 | 说明 |
|---|---|
| text-primary | 主色 |
| text-success | 成功 |
| text-danger | 危险 |
| text-warn | 警告 |
| text-error | 错误 |
| text-info | 信息 |
其它具名颜色
| 类名 | 说明 |
|---|---|
| text-red | red |
| text-pink | pink |
| text-purple | purple |
| text-deep-purple | deep-purple |
| text-indigo | indigo |
| text-blue | blue |
| text-light-blue | light-blue |
| text-cyan | cyan |
| text-teal | teal |
| text-green | green |
| text-light-green | light-green |
| text-lime | lime |
| text-yellow | yellow |
| text-amber | amber |
| text-orange | orange |
| text-deep-orange | deep-orange |
| text-brown | brown |
| text-blue-grey | blue-grey |