搭建项目，清除浏览器的默认样式

理念：

1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。

 

1.*通配符，网页中所有的元素外边距和内边距都是0，项目列表类型是无。
*{margin: 0;padding: 0;list-style: none;}

2.重置列表元素

ul,ol{list-style:none;}

3.重置表格元素

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

4.

body {
    height: 100%;
    -moz-osx-font-smoothing: grayscale; /** 兼容火狐浏览器中设置字体 */
    -webkit-font-smoothing: antialiased; /** 字体抗锯齿渲染 */
    text-rendering: optimizeLegibility; /** 告诉渲染引擎工作时如何优化显示文本 */
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

5.

html {
    height: 100%;
    box-sizing: border-box;
}

6.

*,
*:before,
*:after {
    box-sizing: inherit; /** 从父元素继承 box-sizing 属性的值 */
}

7.

a:focus,
a:active {
    outline: none; /** 使绘制于元素周围的一条线无效 */
}

8.

a,
a:focus,
a:hover {
    cursor: pointer; /** 光标呈现为指示链接的指针（一只手） */
    color: inherit; /** 从父元素继承它的值 */
    text-decoration: none;  /** 没有文本装饰 */
}

9.

div:focus {
    outline: none;/** 使绘制于元素周围的一条线无效 */
}

10.

/** ::-webkit-scrollbar：伪类选择器影响了一个元素的滚动条的样式*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
/** 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）*/
::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 20px;
}