*{
	font-family: "微软雅黑" !important;
	vertical-align: middle;
}


/**
 * 当`body`宽度大于`html`宽度时，某些浏览器会出现内部滚动条，所以给`html、body`设置宽度100%。
 * 取消部分浏览器点击有阴影。
 * 优化移动端滚动事件。
 */

html,
body {
	width: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;

}

/**
统一em样式
 */
em{
	font-style: normal;
}
i{
	display: inline-block;
}


.fl{
	float: left;
}
.fr{
	float: right;
}


/**
 * 移除常用标签的浏览器默认的`margin、padding`
 * pre、code、legend、fieldset、blockquote……等其他标签不是很常用，所以本css都不会一一列举出来，为了简化。如果项目中用到，可以自己单独写。
 */

body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
	margin: 0;
	padding: 0;
}


/*不同浏览器的input、select、textarea的盒子模型宽度计算方式不通，统一为最常见的content-box*/

input,
select,
textarea {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}


/**
 * `table`相邻单元格的边框间的距离设置为0。
 * 设置`table`的边框为合并模式。
 */

table {
	border-spacing: 0;
	border-collapse: collapse;
}


/**
 * 移除浏览器部分元素的默认边框。
 * acronym、fieldset……等其他标签不是很常用，所以本css都不会一一列举出来，为了简化。如果项目中用到，可以自己单独写。
 */

img,
input,
button,
textarea {
	border: none;
}





/*因为`input`默认不继承父元素的居中样式，所以让`input`元素继承父元素的文本居中方式*/

input {
	text-align: inherit;
}


/*让`textarea`默认不可以放缩*/

textarea {
	resize: none;
}


/**
 * 因为部分浏览器默认的`q`标签的前后伪元素有多余样式，所以置空`q`标签前后伪元素。
 * q标签不是很常见，如果开发者需要可以使用。
/*
q::before,
q::after {
    content: '';
}
*/


/**
 * 由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性。
 * 取消这些元素的`outline`样式。
 */

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	color: inherit;
	outline: none;
}


/**
 * 如果绝对定位元素找不到被设置过定位信息的上级元素，那么此元素基于根节点定位，所以给`body`设置相对定位，让这些元素基于`body`定位。
 * 设置网页基本字体颜色为`#666`(深灰色)。
 * 设置网页背景颜色颜色为`#fff`（纯白色）。
 * 使字体渲染更顺滑。
 */

body {
	font: 14px '微软雅黑','Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'STHeiti Light [STXihei]', 'Microsoft Yahei', sans-serif;
	position: relative;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;

}


/**
 * 取消超链接元素的默认文字装饰（下划线）。
 * 灵位del、ins标签的中划线、下划线还是挺好的，就不去掉。
 */

a {
	text-decoration: none;
	cursor: pointer;
}


/**
 * 开发中UI设计的列表都是和原生的样式差太多，所以直接给取消ol，ul默认列表样式。
 */

ol,
ul {
	list-style: none;
}


/*使如下元素默认鼠标经过是`小手`的形状（一般表示可以点击，在PC端挺好）*/

button,
input[type='submit'],
input[type='button'] {
	cursor: pointer;
}


/*取消火狐浏览器部分版本`input`聚焦的时候默认的`padding、border`*/

input::-moz-focus-inner {
	padding: 0;
	border: 0;
}


/*取消部分浏览器`input[type='number']`的默认样式*/

input[type='number'] {
	-moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}


/*输入控件的`placeholder`颜色设置为`#999`（浅灰色）*/

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #999;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #999;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #999;
}


/*由于部分浏览器`template`直接显示出来，所以要隐藏`template`元素*/

template {
	display: none;
}


/**
 * 清楚浮动`c ==> clear`，原子类
 */

.clear {
	zoom: 1;
}

.clear::after {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: '.';
}


/*position: fixed的缩写，原子类*/

.pf {
	position: fixed;
	/*chrome 内核 浏览器 position: fixed 防止抖动*/
	-webkit-transform: translateZ(0);
}


/*利用绝对定位宽高拉升原理，中心居中元素，原子类*/

.middle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}


/*利用相对定位于`CSS3`使元素垂直居中，原子类*/

.middle-v {
	position: relative;
	top: 50%;
	-webkit-transform: -webkit-translateY(-50%);
	-moz-transform: -moz-translateY(-50%);
	-o-transform: -o-translateY(-50%);
	transform: translateY(-50%);
}


/*元素计算宽高德盒子模型以`border`为外界限，原子类*/

.bb {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*单行文本溢出显示省略号`to==>text-overflow`，原子类*/

.to {
	overflow      : hidden;
	white-space   : nowrap;
	text-overflow : ellipsis;
}
.none {
	display: none;
}