简化您的样式编写

CSS 基础样式类

CSS 基础样式类提供了样式重置、通用样式、常用样式、颗粒化样式类
注意：尽量在只需要单一效果，无其他特殊含义的标签中使用，如只需要设置margin-top为20px,则可以添加类.mt20

字体类

字体类 class 属性 描述
字体大小设置 f12,f14,f16,f18,f20,f24 定义字体大小分别为12px,14px…
字体粗细设置 fb,fn 设置字体font-weight粗细
字体缩进 t2，ti 分别设置字体text-indent缩进2个文字,缩进-99999px
字体行高 lh150，lh180，lh200 设置字体line-height行高为150%，180%..
下划线 unl，no_unl 分别设置字体text-decoration有下划线和无下划线
文本对齐 tl,tc,tr 分别设置字体text-align左对齐，居中对齐右对齐
文本溢出 um-text-overflow，um-text-overflow2,um-text-overflow3 文本单行溢出时,末尾加省略号;文本单行溢出时保留2行,末尾加省略号;文本单行溢出时保留3行,末尾加省略号

空间定位

空间定位类 class 属性 描述
相对定位，绝对定位 pr,pa 设置position为relative，设置position为absolute
浮动定位 fl,fr 设置float为left,right
清楚浮动 cb,cl,cr,clearfix 清除2侧浮动，clear:both清除左侧浮动,clear:left清除右侧浮动,clear:right万能浮动清除
垂直方向对齐 vm,vt,vb vertical-align垂直居中对齐；垂直朝上对齐；垂直朝下对齐
隐藏显示类 db,ib,none，hidden 设置display为块级元素block；设置display为行内元素；不显示

元素尺寸

尺寸类 class 属性 描述
宽度 w,w10,w20,w30,w40,w50,w100,w200,w250,w300,w400,w500,w600,w700,w800,w980 分别设置width为100%,10px,20px…
高度 h,h50,h80,h100,h200 分别设置height为100%,80px,100px…

内填充和外边距

内填充和外边距 class 属性 描述
外边距margin m10,m15,m30 分别设置margin为10px，15px,30px
外边距margin-top mt5,mt10,mt15,mt20,mt30,mt40,mt50,mt100 设置margin-top为5px,10px,15px…
外边距margin-right mr5,mr10,mr15,mr20,mr30,mr40,mr50,mr100 设置margin-right为5px,10px,15px…
外边距margin-bottom mb5,mb10,mb15,mb20,mb30,mb40,mb50,mb100 设置margin-bottom为5px,10px,15px…
外边距margin-left ml5,ml10,ml15,ml20,ml30,ml40,ml50,ml100 设置margin-left为5px,10px,15px..
内填充 p5,p10,p15,p30 设置padding为5px,10px…
内填充padding-top pt5,pt10,pt15,pt20,pt30,pt40,pt50 设置padding-top为5px,10px,15px…
内填充padding-right pr5,pr10,pr15,pr20,pr30,pr40,pr50 设置padding-right为5px,10px,15px…
内填充padding-bottom pb5,pb10,pb15,pb20,pb30,pb40,pb50 设置padding-bottom为5px,10px,15px…
内填充padding-left pl5,pl10,pl15,pl20,pl30,pl40,pl50 设置padding-left为5px,10px,15px..

几种居中和排版方式

class 属性 描述
流式布局flex um-box 设置display为flex流式布局
流式布局居中方式 um-box-center，um-box-hc，um-box-vc 水平和垂直方向都居中；仅仅水平方向居中；仅仅垂直方向居中
子元素平分空间 um-bf1 子元素等分父元素剩余空间
css3+绝对定位)居中方式 um-css3-center,um-css3-hc,um-css3-vc 水平和垂直方向都居中；仅仅水平方向居中；仅仅垂直方向居中
空间分布 um-box-justify 左右居中

其他

class 属性 描述
溢出overflow oh,oa 分别设置overflow为hidden,auto
透明度opacity op0,op50 分别设置透明度opacity为透明，半透明
几种颜色属性 um-red,um-green,um-black,um-white,um-grayum-bgc-red,um-bgc-green,um-bgc-black,um-bgc-white,um-bgc-gray 设置color为红色，设置color为绿色，设置color为黑色，设置color为白色，设置color为灰色，设置背景色为红色，设置背景色为绿色，设置背景色为黑色，设置背景色为白色，设置背景色为灰色
铺满内容 um-row 默认um-content有左右各15像素内填充，内部子元素无法再水平方向铺满，在子元素上添加该类可以铺满水平方向内容
圆角 um-circle 设置border-radius为50%，元素为圆形
样式重置 um-no-iconum-no-active，um-no-brs，um-noborder 去除列表上的右箭头；去除列表上的激活状态的背景色；去除圆角；去除边框
文档更新时间: 2018-01-12 16:18