4bb3422148
Former-commit-id: dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly dd9ec5144e4c4668498c42327126c9cd2ff9590a [formerly 096c7586394466fcfa6aeef76f941c65b6c58cb3 [formerly 6ea50546558bb7a5f54d99d34301d3fbae8beea4]]]]] Former-commit-id: 4909868f8dac1be92c76feda0bc3c4a51f8221ca Former-commit-id: 7bcf816a13380e5e1823ef3d8a0050fa95842c73 Former-commit-id: cea58af19fb83f6e4f61a7cc95e999706784a7f2 [formerly 881c7fe80386e4bbd6bdd323eb873c98e7894941] Former-commit-id: edf39aef375f7ecf4d07951f57b8a92baab4ee37 Former-commit-id: 829a819ac72421f791a5cf5a4d62b7a860e7648b Former-commit-id: e3da2e3e4a6f41a5a712760729560efdcf551a3f Former-commit-id: 57e8f1b908c2578a985798a6672a650b9dc53c0c Former-commit-id: 9667afc9b61cdbc5c624a07ee92b4156d0470582
103 lines
2.7 KiB
Markdown
103 lines
2.7 KiB
Markdown
# CSS 工具类
|
|
|
|
## 样式
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-card` | 将该 class 添加至 el-card 组件上使其有跟随主题变化的样式 |
|
|
|
|
`.d2-card` 示例
|
|
|
|
``` vue
|
|
<el-card shadow="never" class="d2-card">
|
|
<template slot="header">header</template>
|
|
body
|
|
</el-card>
|
|
<!-- 快看 我的边框和 header 边框会随着主题切换样式！ -->
|
|
```
|
|
|
|
## 文字
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-text-center` | 文字水平居中 |
|
|
|
|
## 浮动
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-fl` | 左浮动 |
|
|
| `.d2-fr` | 右浮动 |
|
|
| `.d2-clearfix` | 清除浮动 |
|
|
|
|
## 边距
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-m-0` | 外边距 0px |
|
|
| `.d2-mt-0` | 上外边距 0px |
|
|
| `.d2-mr-0` | 右外边距 0px |
|
|
| `.d2-mb-0` | 下外边距 0px |
|
|
| `.d2-ml-0` | 左外边距 0px |
|
|
| `.d2-p-0` | 内边距 0px |
|
|
| `.d2-pt-0` | 上内边距 0px |
|
|
| `.d2-pr-0` | 右内边距 0px |
|
|
| `.d2-pb-0` | 下内边距 0px |
|
|
| `.d2-pl-0` | 左内边距 0px |
|
|
| `.d2-m-5` | 外边距 5px |
|
|
| `.d2-mt-5` | 上外边距 5px |
|
|
| `.d2-mr-5` | 右外边距 5px |
|
|
| `.d2-mb-5` | 下外边距 5px |
|
|
| `.d2-ml-5` | 左外边距 5px |
|
|
| `.d2-p-5` | 内边距 5px |
|
|
| `.d2-pt-5` | 上内边距 5px |
|
|
| `.d2-pr-5` | 右内边距 5px |
|
|
| `.d2-pb-5` | 下内边距 5px |
|
|
| `.d2-pl-5` | 左内边距 5px |
|
|
| `.d2-m-10` | 外边距 10px |
|
|
| `.d2-mt-10` | 上外边距 10px |
|
|
| `.d2-mr-10` | 右外边距 10px |
|
|
| `.d2-mb-10` | 下外边距 10px |
|
|
| `.d2-ml-10` | 左外边距 10px |
|
|
| `.d2-p-10` | 内边距 10px |
|
|
| `.d2-pt-10` | 上内边距 10px |
|
|
| `.d2-pr-10` | 右内边距 10px |
|
|
| `.d2-pb-10` | 下内边距 10px |
|
|
| `.d2-pl-10` | 左内边距 10px |
|
|
| `.d2-m-15` | 外边距 15px |
|
|
| `.d2-mt-15` | 上外边距 15px |
|
|
| `.d2-mr-15` | 右外边距 15px |
|
|
| `.d2-mb-15` | 下外边距 15px |
|
|
| `.d2-ml-15` | 左外边距 15px |
|
|
| `.d2-p-15` | 内边距 15px |
|
|
| `.d2-pt-15` | 上内边距 15px |
|
|
| `.d2-pr-15` | 右内边距 15px |
|
|
| `.d2-pb-15` | 下内边距 15px |
|
|
| `.d2-pl-15` | 左内边距 15px |
|
|
| `.d2-m-20` | 外边距 20px |
|
|
| `.d2-mt-20` | 上外边距 20px |
|
|
| `.d2-mr-20` | 右外边距 20px |
|
|
| `.d2-mb-20` | 下外边距 20px |
|
|
| `.d2-ml-20` | 左外边距 20px |
|
|
| `.d2-p-20` | 内边距 20px |
|
|
| `.d2-pt-20` | 上内边距 20px |
|
|
| `.d2-pr-20` | 右内边距 20px |
|
|
| `.d2-pb-20` | 下内边距 20px |
|
|
| `.d2-pl-20` | 左内边距 20px |
|
|
|
|
## 边距简写
|
|
|
|
20px 设定为通用边距 可以如下简写
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-m` | 外边距 20px |
|
|
| `.d2-mt` | 上外边距 20px |
|
|
| `.d2-mr` | 右外边距 20px |
|
|
| `.d2-mb` | 下外边距 20px |
|
|
| `.d2-ml` | 左外边距 20px |
|
|
| `.d2-p` | 内边距 20px |
|
|
| `.d2-pt` | 上内边距 20px |
|
|
| `.d2-pr` | 右内边距 20px |
|
|
| `.d2-pb` | 下内边距 20px |
|
|
| `.d2-pl` | 左内边距 20px | |