machinecat520
/
zj-Exercise


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            border: 10px red solid;

            /* 
                外边距（margin）
                    -外边距不会影响盒子可见框的大小
                    -但是外边距会影响盒子的位置
                    -一共有四个方向的外边距：
                        margin-top
                            -上外边距，设置一个正值，元素会向下移动
                        margin-right
                            -默认情况下设置margin-right不会产生任何效果
                        margin-bottom
                            -下外边距，设置一个正值，其下边的元素会向下移动
                        margin-left
                            -左外边距，设置一个正值，元素会向右移动
                        
                        -margin也可以设置负值，如果是负值则元素会向相反的方向移动

                    -元素在页面中是按照自左向右的顺序排列的，所以默认情况下，
                        如果我们设置的左和上外边距，则会移动元素自身
                        而设置下和右边距会移动其他元素

                    -margin的简写属性
                        margin可以同时设置四个方向的外边距，用法和padding一样

                    -margin会影响到盒子实际占用空间的大小
            */

            /* margin-top: 100px;
            margin-left: 100px;
            margin-bottom: 100px; */

            /* margin-top: -100px;
            margin-left: -100px;
            margin-bottom: -100px; */
        }
        .box2{
            width: 220px;
            height: 220px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>