CSS技巧：清除浏览器默认样式，让你的页面全由你做主！

莫名其妙的的问题哪里来?

你有没有过写了半天样式，却发现总有些与你想要的效果不同的地方：input带个黑框框，list 的小圈圈，锚点的文字颜色，莫名其妙多出来的一两个像素的距离。。

回到20年前，我刚刚接触css的时候，也是经常为这样的问题感到困惑。但那时候，网络上远没有现在的学习资料那么丰富，百度也没有现在这样无所不能无所不知。那时候，能做的，就是一遍遍的摸索，一遍遍的尝试。好在那时候，伟大的墙还没有建立，我们还可以用谷歌直接查外网。于是，还是一点点找到了些资料，学习CSS和jS，就是那时候入的门。

我们为什么一定要清除浏览器默认的样式设置？

不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

言归正传，浏览器默认样式，就是为了解决上述那些乱七八糟莫名奇妙的问题，让你的网页，真正成为你自己能主宰的自留地。

如何清除浏览器默认样式？

最常见最简单的方法就是：

*{ margin:0; padding:0; box-sizing: border-box; }

一般情况下，这样也能覆盖到大部分的浏览器样式了。但是，在复杂项目应用中，需要更加全面丰富的代码。

贴一下我常用的一个代码，你可以把它存为：reset.css ，然后在你的 style.css 文件开头引用它。

/* 通用重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 清除列表的默认样式 */
ul, ol {
    list-style: none;
}
 
/* 去除链接的默认下划线 */
a {
    text-decoration: none;
}
 
/* 去除图片的边框 */
img {
    border: none;
}
 
/* 设置body的字体样式、背景色等 */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #333;
    line-height: 1.4;
}
 
/* 清除输入框的边框、外边距等 */
input, textarea, button {
    outline: none;
    border: none;
    padding: 10px;
    margin: 5px 0;
    font-size: 16px;
    outline: 0;
}
 
/* 设置placeholder的字体样式 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #bbb;
}
 
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #bbb;
    opacity: 1;
}
 
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #bbb;
    opacity: 1;
}
 
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #bbb;
}
 
/* 设置表单控件的外边距、内边距等 */
input, button {
    padding: 10px 15px;
}
 
/* 设置表单控件的hover和focus状态 */
input:hover, textarea:hover, button:hover {
    background-color: #f0f0f0;
}
 
input:focus, textarea:focus, button:focus {
    background-color: #e5e5e5;
    outline: 0;
}
 
/* 设置表格的边框、外边距等 */
table {
    border-collapse: collapse;
    width: 100%;
}
 
table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
}
 
/* 设置滚动条的样式 */
/* Works on WebKit browsers like Chrome, Safari and Opera */
::-webkit-scrollbar {
    width: 10px;
}
 
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
 
::-webkit-scrollbar-thumb {
    background: #888;
}
 
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
 
/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}