内置样式

介绍

默认包含了一些常用样式，可以直接通过 className 的方式使用。

内外边距

• margin 对应 m
• padding 对应 p
• left、right、top、bottom 分别对应 l、r、t、b
• left、right 对应 x
• top、bottom 对应 y
• xs 对应 4px
• sm 对应 8px
• nm 对应 16px
• lg 对应 24px

<!-- 外边距4px -->
<div class="m-xs"></div>
<!-- 左右外边距8px -->
<div class="mx-sm"></div>
<!-- 顶部外边距16px -->
<div class="mt-nm"></div>
<!-- 内边距24px -->
<div class="p-lg"></div>

flex 布局

• flex-cc 对应 center center
• flex-sc 对应 flex-start center
• flex-ec 对应 flex-end center
• flex-ac 对应 space-around center
• flex-bc 对应 space-between center
• flex-evenly 对应 space-evenly center
• flex-cs 对应 center flex-start
• flex-ce 对应 center flex-end

<!-- 子元素水平垂直居中 -->
<div class="flex-cc" style="width:100px;height:100px">
  <div class="child" style="width:50px;height:50px"></div>
</div>

其它

• pointer 鼠标光标
• position-r 相对定位
• position-a 绝对定位
• position-center 绝对定位居中
• float-left 左浮动
• float-right 右浮动
• clearfix 清除浮动
• ellipsis 单行省略
• ellipsis-2 两行省略(仅 webkit 内核浏览器支持)
• text-center 文本居中
• text-left 文本靠左
• text-right 文本靠右