默认样式
通常情况下,浏览器都会为元素设置一些默认样式。
默认样式的存在会影响到页面的布局,通常情况下,我们编写网页时,必须要去掉浏览器的默认样式(主要是pc端的页面,移动端的页面比较少)
示例:body会有一个8px的边框,会影响到我们页面的布局
<style>
.box1{
width:100px;
height:100px;
border:1px solid black;
}
</style>
<body>
<div class=“box1”></div>
<p>秦时明月汉时关</p>
<p>万里长征人未还</p>
<p>但使龙城飞将在</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
通常情况下不会这样写,但更加严谨
1.如何去掉body的8px的边框【只需在style里添加一个margin就可以了】
2.如何去掉body里p元素的边框
【在style里添加一个margin就可以了】
3如何去掉body里ul的边框
【在style里添加margin和padding还有一个
list-style】
示例:
<style>
body{
margin:0; 【1在此处添加】
}
p{
margin:0; 【2在此处添加】
}
ul{
margin:0; 【3在此处添加】
padding:0; 【3在此处添加】
list-style:none; 【3在此处添加】
}
.box1{
width:100px;
height:100px;
border:1px solid black;
}
</style>
<body>
<div class=“box1”></div>
<p>秦时明月汉时关</p>
<p>万里长征人未还</p>
<p>但使龙城飞将在</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</body>
list-style:none;(去除项目符号)
list-style列表风格
上述最简单的方法
但还会有残留,严谨一点还是用上边的方法
*{
margin:0;
padding:0;
}
有ul再单独去掉
重置样式表,专门用来对浏览器的样式进行重置的
reset.css直接去除了浏览器的默认样式
nomalize.css对默认样式进行了统一
二选一