一个简单的盒模型嵌套---一个大盒子里面嵌套两个中盒子，右边中盒子嵌套六个小盒子

news2024/12/27 0:37:30

在这里插入图片描述
html代码：

 <div class="box1">
                    <div class="box2"></div>
                    <div class="box3">
                    <div class="box4"></div>
                        <div class="box5"></div>
                        <div class="box6"></div>
                        <div class="box7"></div>
                        <div class="box8"></div>
                        <div class="box9"></div>
                    </div>
                    </div>

css代码：

<style type="text/css">
        .box1{
            overflow: hidden;
            width: 800px;
            height: 500px;
            padding: 50px;
            margin: 40px auto;
            background-color: #32cde8;
        }
        .box2{
            width: 450px;
            height: 400px;
            background-color: #2bd09f;
            float: left;
        }
        .box3{
            width: 200px;
            height: 400px;
            padding: 10px;
            background-color: #71e385;
            float: left;
            margin-left: 10px;
            overflow: hidden;
        }
        .box4{
            width: 50px;
            height: 50px;
            background-color: #c377d5;
            float: left;
            margin-right: 10px;
        }
        .box5{
            width: 50px;
            height: 50px;
            background-color: #597ce5;
            float: left;
            margin-right: 10px;
        }
        .box6{
            width: 50px;
            height: 50px;
            background-color: #dde773;
            float: left;
        }
        .box7{
            width: 50px;
            height: 50px;
            background-color: #e0a36e;
            float: left;
            margin: 10px 10px 0 0;
        }
        .box8{
            width: 50px;
            height: 50px;
            background-color: #e556b3;
            float: left;
            margin: 10px 10px 0 0;
        }
        .box9{
            width: 50px;
            height: 50px;
            background-color: #ea6262;
            float: left;
            margin-top: 10px;
        }
    </style>

六个小盒子下面有一点空，再加一个盒子来存放文本
在这里插入图片描述
改完后的html代码：

 <div class="box1">
                    <div class="box2"></div>
                    <div class="box3">
                    <div class="box4"></div>
                        <div class="box5"></div>
                        <div class="box6"></div>
                        <div class="box7"></div>
                        <div class="box8"></div>
                        <div class="box9"></div>
                        <div class="box10"></div>
                    </div>
                    </div>

改完后的css代码：

<style type="text/css">
        .box1{
            overflow: hidden;
            width: 800px;
            height: 500px;
            padding: 50px;
            margin: 40px auto;
            background-color: #32cde8;
        }
        .box2{
            width: 450px;
            height: 400px;
            background-color: #2bd09f;
            float: left;
        }
        .box3{
            width: 200px;
            height: 400px;
            padding: 10px;
            background-color: #71e385;
            float: left;
            margin-left: 10px;
            overflow: hidden;
        }
        .box4{
            width: 50px;
            height: 50px;
            background-color: #c377d5;
            float: left;
            margin-right: 10px;
        }
        .box5{
            width: 50px;
            height: 50px;
            background-color: #597ce5;
            float: left;
            margin-right: 10px;
        }
        .box6{
            width: 50px;
            height: 50px;
            background-color: #dde773;
            float: left;
        }
        .box7{
            width: 50px;
            height: 50px;
            background-color: #e0a36e;
            float: left;
            margin: 10px 10px 0 0;
        }
        .box8{
            width: 50px;
            height: 50px;
            background-color: #e556b3;
            float: left;
            margin: 10px 10px 0 0;
        }
        .box9{
            width: 50px;
            height: 50px;
            background-color: #ea6262;
            float: left;
            margin-top: 10px;
        }
        .box10{
            width: 150px;
            height: 200px;
            background-color: #e0a36e;
            float: left;
            margin: 40px 30px 0 10px;
        }
    </style>