04de4950fc
Former-commit-id: ebc32c296fb4536eca420e3c807a7fd7503a4f65 [formerly ebc32c296fb4536eca420e3c807a7fd7503a4f65 [formerly ebc32c296fb4536eca420e3c807a7fd7503a4f65 [formerly ebc32c296fb4536eca420e3c807a7fd7503a4f65 [formerly 7fdb616f73e2c36514f5138cb5bd8609159b2829 [formerly 81e8458c903cca7218568efd8bb7cfe0ec27c2cc]]]]] Former-commit-id: d4ef6e0b6868352cf932ef40dba76f3558ddee6e Former-commit-id: d60ca041eddfcf2eeb2c1cd9f251d25345add56f Former-commit-id: 17e6d5fdb1436edf1ea269f32928c71682d00388 [formerly 1389028c3944a71da4eae8d3c730f99281280458] Former-commit-id: 5b458e307c8ff34109ecaa836bb5828f59c1e36c Former-commit-id: 838bc54e76eb119c2ac8dfc6aa4718d27d1e4984 Former-commit-id: bf2e0c07a945515850109240acc44d946799f21b Former-commit-id: 7db1e253cbecc6195d80c95bd6dc614bf8b971d1 Former-commit-id: 39250e6a78db400e372f06523e084876b4e8307f
99 lines
2.6 KiB
Markdown
99 lines
2.6 KiB
Markdown
# CSS 工具类
|
|
|
|
## 样式
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.d2-card` | 将该 class 添加至 el-card 组件上使其有跟随主题变化的样式 |
|
|
|
|
`.d2-card` 示例
|
|
|
|
``` vue
|
|
<el-card shadow="never" class="d2-card"></el-card>
|
|
```
|
|
|
|
## 文字
|
|
|
|
| 类名 | 效果 |
|
|
| --- | --- |
|
|
| `.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 | |