<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .box1{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                border: 10px solid red;
                /*
                 * 外边距指的是当前盒子与其他盒子之间的距离，
                 *     他不会影响可见框的大小，而是会影响到盒子的位置。
                 * 盒子有四个方向的外边距：
                 *     margin-top
                 *     margin-right
                 *     margin-bottom
                 *     margin-left
                 * 
                 * 由于页面中的元素都是靠左靠上摆放的，
                 *     所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
                 *     而如果是设置右和下外边距会改变其他盒子的位置
                 */
                /*
                 * 设置box1的上外边距，盒子上边框和其他的盒子的距离
                 */
                margin-top: 100px;
                
                /*
                 * 左外边距
                 */
                margin-left: 100px;
                
                /*设置右和下外边距*/
                margin-right: 100px;
                margin-bottom: 100px;
                
                /*
                 * 外边距也可以指定为一个负值，
                 *     如果外边距设置的是负值，则元素会向反方向移动
                 */
                margin-left: -150px;
                margin-top: -100px;
                margin-bottom: -100px;
                
                
                /*
                 * margin还可以设置为auto，auto一般只设置给水平方向的margin
                 *     如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
                 *     垂直方向外边距如果设置为auto，则外边距默认就是0
                 * 
                 * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
                 *     就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
                 *     以使子元素在父元素中水平居中
                 * 
                 */
                
                /*margin-left: auto;
                margin-right: auto;*/
                
                /*
                 * 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
                 *     规则和padding一样
                    
                 */
                margin: 0 auto;
                
            }
            
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>
posted on 2021-06-30 19:15 leiyanting 阅读(419) 评论(0) 收藏举报
刷新页面返回顶部
导航
