1.初识浏览器的默认样式
html是网页的结构,css是表现,按理说结构我们是看不到的,只有搭配css才可以看到。但是我们只是写html后,在网页中也能看到相应的东西,这是由于浏览器的默认样式,通常情况下,浏览器会为网页设置默认样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们定义了div但是并没有给他设置margin值,但在页面中div上方很明显有一个空隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li>白日依山尽,</li>
<li>黄河入海流。</li>
<li>欲穷千里目,</li>
<li>更上一层楼。</li>
</ul>
</body>
</html>
我们书写了li标签,但是并没有给标签前边加项目符号,也没有在margin,但是显示时他们的确存在。
以上都属于浏览器的默认样式,浏览器的默认样式很多很多。
2.默认样式带来的问题
浏览器的默认样式会有margin等,这些样式会影响页面的布局。
我们在开发中,书写css之前要将浏览器的默认样式给清除。
3.清除浏览器的默认样式
1.简单清除
*{
margin 0;
padding: 0;
}
#这样只是大致清除了所有元素的margin和padding,但有一些元素比如列表的项目符号还是清除不掉,需要手动再写。
2.完美清除(使用轮子)
别人已经写好了清除默认样式的css文件,我们只需下载下来引入即可。
normalize.css 统一了所有元素的默认样式
reset.css 清除所有元素的默认样式(个人喜欢用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./清除默认样式/reset.css">
<!-- <link rel="stylesheet" href="./清除默认样式/normalize.css"> -->
<style>
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
<li>白日依山尽,</li>
<li>黄河入海流。</li>
<li>欲穷千里目,</li>
<li>更上一层楼。</li>
</body>
</html>
引入重置样式表后,页面元素就没有默认样式了。