HTML&CSS基础-外边框

　　　　　　　　　　　　　　　　　HTML&CSS基础-外边框
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰
一.HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                /**
                 *     定义内边距
                 */
                border: 10px solid yellow;
                /**
                 *     定义外边距
                 *         外边距指的是当前盒子与其它盒子之间的距离,他不会影响可见狂的大小，而是会影响到盒子的位置。
                 *         盒子有四个方向的外边距:
                 *             margin-top:
                 *                 设置box1上的外边距，盒子上边框和其它盒子的距离
                 *             margin-bottom:
                 *                 设置box1下外边距。
                 *             margin-left:
                 *                 设置box1左外边距。
                 *             margin-right:
                 *                 设置box1右外边距。
                 *         
                 *         由于页面中的元素都是靠左靠上摆放的，所以要注意以下两点:
                 *             当我们设置上和左外边距时，会导致盒子自身的位置发生改变;
                 *             当我们设置下和右边距时，会改变其它盒子的位置
                 * 
                 *         外边距也可以指定一个负值，如果外边距设置的时负值，则元素会向反方向移动
                 * 
                 *         margin还可以设置auto，auto一般只设置给水平方向的margin
                 *             如果只指定左外边距或者右外边距的margin为auto则会将外边距设置为最大值;
                 *             垂直方向外边距如果设置auto，则外边距默认就是0;
                 *             如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值,就可以使元素自动在父元素中居中;
                 *                 所以我们经常讲左右外边距设置为auto以使子元素在父元素水平居中
                 * 
                 *         外边距同样可以使用简写属性margin,规则和padding一样：
                 *             可以同时设置四个方向的外边距，分别表示，上，右，下，左这四个外边距的值(顺时针方向);
                 *             可以同时设置三个值，分别表示上，左右，下这四个外边距的值
                 *             可以同时设置两个值，分别表示上下，左右这四个外边距的值
                 *             也可以设置一个值，表示上下左右的外边距都一样
                 * 
                 */
                margin-top: 50px;
                margin-bottom: 50px;
                margin-left: 50px;
                margin-right: 50px;
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                margin-left: auto;
                margin-bottom: -100px;
            }
            
            .box3{
                width: 200px;
                height:200px;
                background-color: blue;
                margin-left: auto;
                margin-right: auto;
            }
            
            .box4{
                width: 200px;
                height: 100px;
                background-color: #FFFF00;
                margin: 10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>
二.浏览器打开以上代码渲染结果