mes-ui-d2/docs/zh/sys-css

sidebar

sidebar
auto

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