CSS中使盒子移动方法总结

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

结果：