原文链接:https://github.com/hangyangws/baseCss#basecss
统一各个浏览器差异、统一团队开发起始标准、弥补浏览器的“缺点”、提供频繁使用的原子类名。
@charset ‘utf-8‘;
/**
* base.css
* 航洋无声(hangyangws@foxmail.com、hangyangws.win、github.com/hangyangws、weibo.com/hangyangws)
*/
/*标准字体大小(rem参照对象)设置为14像素*/
html {
font-size: 14px;
}
/**
* 当`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;
}
/**
* 移除常用标签的浏览器默认的`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;
color: #666;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/**
* 取消超链接元素的默认文字装饰(下划线)。
* 灵位del、ins标签的中划线、下划线还是挺好的,就不去掉。
*/
a {
text-decoration: none;
}
/**
* 开发中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=