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

你有没有过写了半天样式，却发现总有些与你想要的效果不同的地方：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;
}