浏览器的默认样式

什么是默认样式，就是浏览器在执行代码时，有些地方会默认添加一些浏览器自己默认的东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器的默认样式</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
        }
                p{
                  background-color:blue;
                  }
    </style>
</head>
<body>
    <div class="box1"></div>
    <p>我是一个段落</p>
</body>
</html>

当我写完代码运行的时候会发现，我的盒子和段落都不是紧挨着网页的边框，都是有点距离的。

显示页面.JPG

那么这个边框是多少呢？在哪里有显示，其实我们在进行页面的检查时，就能发现端倪了。

打开显示页面然后按F12会发现进入一个页面
点击<body>标签时我们会发现它的表框是8，而点击box1和p标签的时候，什么都没有。那么这个8就是浏览器设置的默认样式。也是为了在什么都没有设置的时候，会使得在浏览器上显示的更好看。

父元素的边框.JPG
子边框.JPG

那么问题又来了，@_@如何解决呢？或者去除浏览器的默认设置呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器的默认样式去除</title>
    <style type="text/css">
    * {
        /*
        使用通配* 虽然好使，但是性能不是很好
        后面我们会介绍其他的。
        */
        padding:0;
        margin: 0;
    }
    </style>
</head>
<body>
    
</body>
</html>