仔细阅读哦
总共就几大类，非常好记，编辑工具写类时会有提示的，也不用记死，只要理解其意思即可。理解了这些类，你就可基本不用写样式开发组件了，效率加速提升，越用越爽！
本tm-vuetify组件，几乎都是用这些类组装的。
如果发现了纰漏请及时通知我。
目录导航
杂类
| 类名 | 作用说明 |
|---|---|
| safe-height | 底部安全区域高度 |
| overflow | 溢出隐藏。 |
| overflow-x | 横轴溢出隐藏，Y轴自动（滚动条） |
| overflow-y | 竖向溢出隐藏，X轴自动（滚动条） |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定悬浮 |
| clear | 清除浮动 |
| fulled | 宽度100% |
| fulled-height | 高度100% |
| gray-100 | 使元素变灰色 |
| gray | 使元素变灰色25% |
| flat | 使元素变为扁平，去掉了投影，投影，圆角，边框 |
| d-inline-block | 使元素变为内联，即和文字变为一行 |
| 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 |
| rounded | 50%的半圆角 |
圆角的其它辅助特性。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 |
投影
| 类名 | 作用说明 |
|---|---|
| shadow-[x] | 投影大小x=[0-25]如：shadow-5 |
| shadow-颜色-值 | 主题色的投影，比如红色投影shadow-red-5 |
边线
| 类名 | 作用说明 |
|---|---|
| border-[x] | 加四边边线，边线大小x=[0-25]如：border-5 |
| border | 加四边边线，边线为1px |
| border-[颜色]-[方向]-[x] | 颜色边线如：border-red-a-1 四周边红色框1 |
border的其它辅助特性。round-方向-精细
| l | r | b | t | a |
|---|---|---|---|---|
| 左 | 右 | 底 | 顶 | 四边 |
规则:border-方向-粗细
规则:border-[颜色]-[方向]-[粗细]
zIndex层级
| 类名 | 作用说明 |
|---|---|
| zIndex-[x] | x=[0-25]如：zIndex-5,=>z-index:5 |
| zIndex-n[x] | x=[0-25],其中n=4,如：zIndex-n5,=>z-index:20 |
oulined类
在任何颜色类名跟上 outlined 即可为镂空边框模式
比如红色镂空边框 red outlined 类组合即可。
text类
在任何颜色类名跟上 text 即可为浅色背景，主题文字色的文本模式
比如红色文本模式 red text 类组合即可。
bk类,暗黑模式
任何背景和边线类或者渐变，文字等，加上bk组合类，即可变为暗色模式。 比如在红色模式下暗黑可以写为red bk 即可把红色变成变暗红，其它所样式都适用。
渐变背景
主题渐变为主题库中的色彩直接演变而来。 左右渐变
如果想要一个左右渐变主题色，使用偏暗 bg-gradient-颜色名-accent 偏亮 bg-gradient-颜色名-lighten
比如红色渐变 bg-gradient-red-accent，其它类推。
上下渐变 如果想要一个上下渐变主题色，使用偏暗 bg-gradient-颜色名-accent-b 偏亮 bg-gradient-颜色名-lighten-b
比如红色上下渐变 bg-gradient-red-accent-b，其它类推。
文字颜色类
如果想要改变一个文字颜色为主题色，使用text-颜色名即可。
比如红色文字 text-red，其它类推。
文字渐变颜色
如果想要改变一个文字颜色为渐变主题色，使用偏暗 text-gradient-颜色名-accent 偏亮 text-gradient-颜色名-lighten
比如红色渐变文字 text-gradient-red-accent，其它类推。
背景颜色类
如果想要改变一个背景颜色为主题色，使用颜色名即可实现。
比如红色背景 red，其它类推。将自动改变文字颜色 和 背景色的协调。
Flex排版
| flex-start | flex-end | flex-center | flex-between | flex-around | flex-reverse |
|---|---|---|---|---|---|
| 居中左对齐 | 居中右对齐 | 居中对齐 | 居中两边对齐 | 居中均分 | 行内反转内容 |
| flex-end-left | flex-end-center | flex-end-right |
|---|---|---|
| 底左对齐 | 底居中对齐 | 底右对齐 |
| flex-top-start | flex-top-center | flex-top-end |
|---|---|---|
| 上左对齐 | 上居中 | 上右对齐 |
| flex-col | flex | flex-wrap | flex-shrink |
|---|---|---|---|
| 纵向行排列 | flex布局 | 自动断行 | 保证宽度不受挤压 |
| flex-[x] | |||
| :--- | |||
| [x]=0-12，flex布局 |
位置控制
| t | l | r | b |
|---|---|---|---|
| 上top | 左left | 右right | 底bottom |
规则示例
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 |
|---|---|---|---|---|---|---|
| 四周 | 左 | 右 | 顶 | 底 | 水平左右 | 竖向上下 |
外边距如果觉得数据不够用嫌小，还可以这样使用m方向-n值比如外边距40可以写成：ma-n10，n*4倍的数据，n为1-25
负数外边距
还可以使用负方向
规则和上方样，需要加上-号。比如向上负：mt--24,表示负24rpx，ml-n10表示向左负40rpx
内边距
| 类名 | 方向 | 值 | 示例 |
|---|---|---|---|
| p | a | 0-50 | pa-10,四周内边距为10upx |
规则为p方向-值即可。
可选的方向
| a | l | r | t | b | x | y |
|---|---|---|---|---|---|---|
| 四周 | 左 | 右 | 顶 | 底 | 水平左右 | 竖向上下 |
内边距如果觉得数据不够用嫌小，还可以这样使用p方向-n值比如内边距40可以写成：pa-n10，n*4倍的数据，n为1-25