CSS-样式重置+公共样式

最近更新时间：2017年7月6日11:01:29

《我的博客地图》

    作为前端工程师，需要不断的去总结和积累有共性的代码，这对于开发来说事半功倍。在书写样式文件时，公共样式和样式重置（样式初始化）每次都会用到。

1、公共样式

//按钮公共样式

.btn{display: inline-block; font-size: 30rpx; border-radius: 4rpx; color: #fff;  box-shadow:0px 2px 8px 1px rgba(9,166,7,0.25); box-sizing: border-box; -webkit-box-sizing: border-box; }

.btn_primary{background: #09bb07;}
.btn_primaryAct{background:#0ab007;}
.btn_danger{ background: #d91f16}
.btn_warning{ background: #ff9500;}

.btn_s{height:; line-height:; padding:;width:;}
.btn_m{height:; line-height:; padding:;width:;}

.btn_l{height:; line-height:; padding:;width:;}

//颜色

.color_theme{ color:}   /* 主题颜色 */
.color_important{ color:;}
.color_primary{ color:;}   /* 常规的颜色 */
.color_sub{ color:;}
.color_danger{color:;}

.fb{ font-weight: bold;}

//布局

.fl{ float: left;}
.fr{ float: right;}
.clear{ clear: both;}
.clearfix{*zoom:1;}
.clearfix::after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.flex{ display: flex; display: -webkit-flex;}
.flex_ver{ -webkit-align-items: center;  align-items: center;}  /* 垂直居中 */
.flex_hor{  -webkit-justify-content:space-around;  justify-content:space-around;}  /* 水平居中 */
.flex_jus{ -webkit-box-pack: justify;  -webkit-justify-content: space-between;  -ms-flex-pack:justify ;  justify-content: space-between;}  /*  两端对齐*/

.show{ display: block;}
.hide{ display: none;}

2、样式重置

image::after{ border: none;}//去除下边线
button::after{ border: none;}//去除下边线

3、样式初始化

page{font-size:12px;}//初始化微信小程序每个页面的根元素<page></page>字号//