少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>
结果: