user agent stylesheet如何修改

有天按导师吩咐写了个网页，发现h2标签的样式不太对劲，遂按下F12调试，在右侧style面板中发现了我从未定义过的样式，来自user agent stylesheet，查阅了资料以后发现这货是浏览器自动加上的格式。

具体来说是这样的：user agent stylesheet将被你在自己的css中设置的任何内容覆盖。它们只是最底层：在没有页面或用户提供的任何css的情况下，浏览器仍然必须以某种方式呈现内容，而css只是描述了这一点。因此，如果你认为css存在问题，那么你的HTML或css或两者（您没有写任何内容）确实存在问题。

关于user agent stylesheet的概念可查看官方文档：点击打开链接

解决方案1：

由于user agent stylesheet的优先级很低，自己写样式覆盖即可。在你的css中添加被user agent stylesheet所覆盖了的样式，如下图，这是我刚开始调试发现的user agent stylesheet

 

复制粘贴下来，在自己的代码中更改样式

修改之后的结果

ok，问题解决

 

解决方案2：写reset.css或者normalize.css

目的：减少浏览器在默认行高，边距和标题字体大小等方面的不一致性

 

示例reset.css的代码

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

希望对你有所帮助