HTML/CSS编写盒子模型

最新推荐文章于 2024-10-12 17:31:43 发布

今天少吃一点

最新推荐文章于 2024-10-12 17:31:43 发布

阅读量455

点赞数

本文链接：https://blog.csdn.net/m0_58822480/article/details/117690610

版权

源代码如下：

<!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>盒子模型</title>
    <style>
    .box1
{
 
    width:300px;
    height:300px;
    padding:30px;
    margin:0px auto;
    border: 5px dashed rgb(216, 19, 19);
}
 
.box2
 
{
 
    width:250px;
    height:250px;
    padding:20px;
    border:5px solid rgb(236, 144, 24);
    margin:0px auto;
}
.box3{
    width:200px;
    height:200px;
    padding:15px;
    margin:0px auto;
    border: 8px dotted rgb(95, 8, 153);

}
.box4{
    width:150px;
    height:150px;
    padding:10px;
    margin:0px auto;
    border: 5px solid rgb(143, 21, 116);
}
.box5{
    width:100px;
    height:100px;
    padding:3px;
    margin:0px auto;
    border: 20px solid rgb(20, 204, 82);
}
.box6{
    width:50px;
    height:50px;
    padding:10px;
    margin:0px auto;
    border: 3px solid black;
}
 </style>
        
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">
                <div class="box4">
                    <div class="box5">
                        <div class="box6">


    </div>
     


</body>
</html>