lovecoding
/
Java0715


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .outerDiv{

            width: 800px;

            height: 400px;

            border: 1px solid rgb(76, 3, 3);

            background-color: gainsboro;

            margin: 0px auto;

            /* 对于居中的处理 设置上下外边距为0 左右外边距自动居中 */

        }

        .innerDiv{

            width: 100px;

            height: 100px;

            /* margin-top: 10px;

            margin-bottom: 20px;

            margin-left: 40px;

            margin-right: 30px; */

            margin: 10px 30px 20px 40px;

            /* 可以传入两个值 第一个值对应上下 第二个值对应左右 */

            /* 可以传入四个值 按照顺时针的顺序 分别对应 上右下左 */

        }

        .d1{

            background-color: rgb(235, 159, 159);

            /* padding-top: 10px;

            padding-left: 20px;

            padding-bottom: 30px;

            padding-right: 40px; */

            padding: 10px 40px 30px 20px; 

        }

        .d2{

            background-color: rgb(231, 146, 44);

        }

        .d3{

            background-color: rgb(180, 180, 235);

        }

    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
    </div>
    
</body>
</html>