CSS 实用类

样式

类名 效果
.d2-card 使 el-card 组件样式跟随主题变化
  • .d2-card 示例
<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
最后更新: 9/21/2018, 2:59:30 PM