7种方式写一个红色盒子

最新推荐文章于 2022-11-23 07:00:00 发布

weixin_17307028096

最新推荐文章于 2022-11-23 07:00:00 发布

阅读量456

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45538893/article/details/105641257

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /*width*/
        .box1{
            width: 600px;
            height: 600px;
            background-color: red;
         }
        /*padding*/
        .box2{
            width: 0;
            height: 0;
            padding: 300px;
            background-color: red;
        }
        /*width+padding*/
        .box3{
            width:200px;
            height: 200px;
            padding: 200px;
            background-color: red;
        }
        /*border*/
        .box4{
            width: 0;
            height: 0;
            border: 300px solid red;
        }
        /*width+border*/
        .box5{
            width: 200px;
            height: 200px;
            border: 200px solid red;
            background-color: red;
        }
        /*border+padding*/
        .box6{
            width: 0;
            height: 0;
            border: 200px solid red;
            padding: 100px;
            background-color: red;
        }
        /*border+width+padding*/
        .box7{
            width: 200px;
            height: 200px;
            padding: 100px;
            border: 100px solid red;
            background-color: red;
        }
    </style>

</head>
<body>
    <div class="box1">盒子1</div>
    <br>
    <div class="box2">盒子2</div>
    <br>
    <div class="box3">盒子3</div>
    <br>
    <div class="box4">盒子4</div>
    <br>
    <div class="box5">盒子5</div>
    <br>
    <div class="box6">盒子6</div>
    <br>
    <div class="box7">盒子7</div>


</body>
</html>