这节主要是说盒子模型中的margin、padding、border等内容
是绘制于元素周围的一条线，位于边框边缘的外围（border与margin之间，border的外围），可起到突出元素的作用。
值得注意的是，outline与border是不同的，因为outline是不占用空间的。
我这里让outline的宽度为40px，覆盖了h1标题的一部分内容，主要是想表达：outline不占用空间，不会像border一样，使得文字被挤下去。
这个略微覆盖的效果还是上面的哪个outline的效果，只是表面覆盖，而非占用空间。
这个是可以设置外边框的，上下左右都可以设置，也可以默认四个方向的宽度都是一样。比如这段div的margin的配置就是下面的这个配置
margin-left: 50px;
margin-top: 28px;
margin-bottom: 60px;(这个主要是影响下面)
接下来说填充（padding），填充的部分是border与content之间的部分，是透明的，也比较简单。为了直观起见，我们这次顺手给使用一个border。
padding-left: 30px;
padding-top: 5px;
padding-bottom: 1px;
配置如上，很简单的。
题外话，padding:25px 50px 75px 100px;这个是css支持的写法，不过根据我的猜测蛤，实际应用肯定是不用的，毕竟这是降低了可读性。如果我们明确的说出来了left、top很显然的，而这样一行写出来，还得记忆哪个是左padding，哪个是右padding。
最后我们再来说说border。也是比较简单的。
配置如下：
margin-top: 30px;
margin-bottom: 300px;
border-left-style: solid;
border-left-color: aqua;
border-left-width: 5px;
border-right-style: double;
border-right-color: black;
border-right-width: 7px;
border-top-style: dotted;
border-top-color: red;
border-top-width: 3px;
border-bottom-style: dashed;
border-bottom-color: gray;
border-bottom-width: 3px;