CSS中使盒子移动方法总结

最新推荐文章于 2025-11-16 17:33:46 发布

原创最新推荐文章于 2025-11-16 17:33:46 发布 · 1.5w 阅读

47 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html5 #html #css3

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

少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>

方式一：外边距（margin）

CSS规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）四个部分组成；调整黄盒子下方margin值，使绿盒子移动（调整绿盒子上方margin值同样可以）。

⚠️注：行内元素的margin在水平方向有效，垂直方向无效。

属性：

margin ：数字+px

margin有四个方向取值：

1个值：上下左右

2个值：上下、左右

3个值：上、左右、下

4个值：上、右、下、左

        .box{
            height: 500px;
            width: 500px;
            background-color: darkgrey;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 调整黄盒子下方margin值移动 */
            margin: 0px 0px 200px 0px;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }

结果：

单方向移动：

margin-方向：数字+px；

如： margin-top: 200px;

margin-left: 200px;

margin-bottom: 200px;

margin-right: 200px;

        .box{
            height: 500px;
            width: 500px;
            background-color: darkgrey;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /* 调整绿盒子上方margin值移动 */
            margin-top: 200px;
        }

结果：

方式二：定位（position）

定位的应用场景：当一个盒子叠加在另一个盒子上，让上方盒子固定在某个位置。

设置定位方式：属性名position

属性值：（定位方式）

静态定位：static，静态定位就是和标准流一样，是不能通过方位属性进行移动的
相对定位:relative，需要配合方位属性+数字px 实现移动，是相对于原来自己的位置进行的移动没有脱离标准流。
绝对定位：absolute，需要配合方位属性+数字px 实现移动，是相对于最近的“有定位”的祖元素进行移动，若都没有则在浏览器可视范围内进行移动，脱离标准流。
固定定位：fixed，需要配合方位属性+数字px 实现移动，固定到浏览器，脱离标准流。

采用定位移动绿盒子的方法：子绝父相

意为：子元素，绝对定位，父元素，相对定位。

    <style>
        /* 子绝父相 */
        .box{
            /* 父盒子，相对定位 */
            position: relative;
            height: 500px;
            width: 500px;
            background-color: darkgrey;
        }
        .one{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .two{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /* 子元素，绝对定位；这里子元素参照的是父盒子，box */
            position: absolute;
            /* 绝对定位会脱离标准流 */
            /* 因参照父盒子，所以想让绿盒子在原有的位置上向下移动200px，既距离父盒子边框300px */
            top: 300px; 
        }
    </style>

结果：

方式三：2D移动（transform）

属性：transform

属性值：translate（x轴数值+px，y轴数值+px）

⚠️注：在没有脱离标准流之前，使用transform,不会影响其他盒子的位置，但使用浮动等，使其脱离了标准流则会影响,对于行内元素是无效的。

    <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;
            /* 使用2D定位进行移动；x轴不移动值为0px，y轴移动200值为200px */
            transform: translate(0px,200px);
        }
    </style>

结果：