常用css样式（后续增加）

一、常用公共样式

1.样式重置

@charset "utf-8";

/** 清除边距 **/
body,h1,h2,h3,h4,h5,h6,p,blockquote, /* structural elements 结构元素 */
dl,dt,dd,ul,ol,li,a,span,i,b, /* list elements 列表元素 */
form,fieldset,legend,button,input,textarea, /* form elements 表单元素 */
th,td /* table elements 表格元素 */ {margin:0;padding:0;}

/** 字体设置 **/
body,
button,input,select,textarea/* for ie */{font:12px/1.5 Verdana , Arial, Helvetica, sans-serif; color:#333;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,em,i{font-style:normal;} /* 将斜体扶正 */

/*去除元素轮廓---fbx---*/
div,table,form,input,button,select,textarea,fieldset,legend{outline:none;}/* for google / safari*/

/** 重置列表元素 **/
ul,ol{list-style:none outside none;}

/** 重置链接元素 **/
a{text-decoration:none; color:#06A0E4; cursor: pointer;outline:none;}
a:hover{text-decoration: underline;}

/** 重置表单元素 **/
img{border:0;} /* img 搭车：让链接里的 img 无边框 */
button,input,select,textarea {font-size:100%;} /* 使得表单元素在 ie 下能继承字体大小 */

/** 重置元素垂直居中 **/
img,input,select,textarea,button,i{vertical-align:middle;}

/** 显示样式元素 **/
.hidden{display:none;}
.show{display:block!important;}
.pointer{ cursor:pointer!important;}
.no_pointer{ cursor:default!important;}
.overF_hidden{overflow:hidden;}
.positionR{ position:relative;}
.normal_a:hover{text-decoration:none;}

/** 字体设置 **/
.bigFont{font-size:14px;}
.normalFont{ font-size:12px!important; font-family:"宋体"!important;font-weight: normal;}
.font18{font-size:18px;}
.imFs{font-family:'宋体';}

/** 文字对齐方式设置 **/
.textRt{text-align:right!important;}
.textLt{text-align:left!important;}
.textCt{text-align:center!important;}

/** 浮动 **/
.fl{float:left !important;}
.fr{float:right !important;}
.clearB{ clear:both;}
.clearfix:after{content:"\0020";display:block;clear:both;height:0;visibility:hidden}
* html .clearfix{zoom:1}
*+html .clearfix{zoom:1}

/** 清除边框，清除边距 **/
.nobor{border:none!important;}
.nomargin{margin:0!important;}
.nobg{ background:none!important;}

2.自适应——媒体查询

@media screen and (min-width:1600px) {
	
}
@media screen and (max-width: 1600px) {
	
}
@media screen and (max-width: 1000px) {
	
}

二、常用样式

1. 隐藏多余文字

.hiddenTxt{overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}

2.上下左右居中

（2）定位实现

/*父级*/
.p{
position:relative
}
.c{
position:absolue;
top:50%;
left:50%;
transfom:translateX(-50%) translateY(-50%);
}

（2）伸缩布局实现

.p{
display:flex;
flex-direction:cloumn;
justify-content:center;
align-items:center;
}