CSS中使盒子移动方法总结

最新推荐文章于 2024-08-17 16:24:11 发布

Uanun

最新推荐文章于 2024-08-17 16:24:11 发布

阅读量1.5w

点赞数 11

文章标签： css 前端 html5 html css3

本文链接：https://blog.csdn.net/Thekuuuu/article/details/121823192

版权

本文总结了三种在CSS中移动盒子的方法：1) 使用外边距（margin）；2) 通过定位（position）实现，包括静态、相对、绝对和固定定位；3) 利用2D转换（transform）的translate属性。详细解释了各方法的适用场景和语法。

摘要由CSDN通过智能技术生成

少BB，先总结：

外边距（margin）

定位（position）

2D移动（transform）

问题：如何将绿盒子向下移动200px？

html代码

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
    </div>
</body>

CSS代码

    <style>
        .box{
            height: 500px;
            width: 500px;
            background-color: darkgrey;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>