用reset.css重置浏览器默认样式的重要性

最新推荐文章于 2022-09-10 15:18:54 发布

tgump

最新推荐文章于 2022-09-10 15:18:54 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签：前端开发 css reset.css 样式重置

本文链接：https://blog.csdn.net/a0389192/article/details/39963773

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

遇到一个问题，非常基础，描述如下：

试用HTML/CSS制作一个网页头部, 要求:

头部宽度为浏览器宽度;

头部内有一个居中的,宽度为600px, 高度为30px的导航条;

导航栏内有3个栏目, 分别是”首页”, “分类”, 和”关于我们”; 每个块宽度为200px, 背景为黑色,文字为白色居中;

鼠标移动到每一个栏目上时, 栏目的背景颜色变成红色;

尝试着练习了一下。

HTML代码

<!DOCTYPE html>
<html>
<body>
	<header>
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">分类</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</nav>
	</header>
</body>
</html>

CSS代码

html, body{margin: 0; padding: 0;}

header{position: relative; width: 100%;}

nav{width: 600px; height: 30px; margin: 0 auto;}

li{float: left; width: 200px; line-height: 30px; list-style: none; text-align: center;  background-color: black;}

li:hover{background-color: red;}

li>a{text-decoration: none; color: white;}

效果如下图

可以看到每个导航栏宽度width设置为200px结果出现换行，将li 的width改为33.333333%，结果显示正常：

到这里我以为就把问题解决了，大牛们看到这里应该笑掉大牙了。没错，33.333333%再怎么接近也不满足题目里宽度为200px的要求并且导航条与浏览器顶部之间明显有一段间距。

实际上真正的问题不在这里，HTML标签在浏览器里有默认的样式，可能为边距、边框、缩进等，而且不同的浏览器默认样式也不同。

所以就有了reset.css文件，目的是为了重置浏览器的默认样式，统一定义以生成相同的显示效果。

上例的问题根源在于ul默认有缩进，而我只是将html和body的样式重置了。

将代码改为

html, body, header, nav, ul, li{margin: 0; padding: 0;}

header{position: relative; width: 100%;}

nav{width: 600px; height: 30px; margin: 0 auto;}

li{float: left; width: 200px; line-height: 30px; list-style: none; text-align: center;  background-color: black;}

li:hover{background-color: red;}

li>a{text-decoration: none; color: white;}

或者暴力点，设置*{margin: 0; padding: 0;}，但是渲染成本增大，效率较低，不推荐使用。

下面附上几个成熟的reset.css文件，可直接拷贝复用：

YUI

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}

Eric Meyer

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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

也可以自己写一份，不断维护，循环复用，下面是我的：

/*reset stylesheet*/
/*created by kevin.t*/
/*on 20140930*/

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;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display: block;}

body{line-height: 100%;}

blockquote, q{quotes: none;}

blockquote:before, blockquote:after, q:before, q:after{content: ''; content: none;}

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

*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

tgump

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用reset.css重置浏览器默认样式的重要性

遇到一个问题描述如下：试用HTML/CSS制作一个网页头部, 要求:头部宽度为浏览器宽度;头部内有一个居中的,宽度为600px, 高度为30px的导航条;导航栏内有3个栏目, 分别是”首页”, “分类”, 和”关于我们”; 每个块宽度为200px, 背景为黑色,文字为白色居中;鼠标移动到每一个栏目上时, 栏目的背景颜色变成红色;
复制链接

扫一扫