盒子六环

最新推荐文章于 2025-05-12 14:22:58 发布

原创最新推荐文章于 2025-05-12 14:22:58 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

8 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>六环</title>
<style>
/* #guaiyi{
background: red;
width: 200px;
height: 200px;
border: 10px solid green;
padding: 20px;
margin: 30px;
把盒子的计算方式变成怪异盒模型
box-sizing: border-box;
}*/
.div1{
border: 1px dashed black;
width: 400px;
height: 400px;
}
.div2{
width: 350px;
height: 350px;
background: #F6F6F6;
border: 5px solid #D1F0FD;
margin: 20px;
}
.div3{
width: 260px;
height: 260px;
background: #FF9EDC;
margin: 25px;
padding-left: 40px;
padding-top: 40px;
}
.div4{
width: 218px;
height: 218px;
border: 1px dashed white;
/* BFC方法 */
/* margin: 40px;
display: inline-block;*/
}
.div5{
height: 200px;
width: 200px;
border: 1px dashed white;
margin: 8px;
}
.div6{
height: 100px;
width: 100px;
border: 5px solid #FFFD4B;
background: #80FF59;
margin: 45px;
}
</style>
</head>
<body>


<div class="div1">
<div class="div2">
<div class="div3">
<div class="div4">
<div class="div5">
<div class="div6">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>