网页中移动盒子的情况整理
NO.1 通过定位来解决** 话不多说上代码
1.body样式
<body>
<div class="p">
<div class="c"></div>
</div>
</body>2.style样式
.p {
position: relative;
height: 500px;
width: 800px;
background-color: purple;
margin-top: 100px;
margin: auto;
}
.p .c {
position: absolute;
top: 200px;
left: 350px;
height: 100px;
width: 100px;
background-color: black;
}这种方式缺陷在于不灵活，完全是根据大盒子的长宽进行计算，修改比较麻烦。
NO.2 如果对于这种方案的一种增添，我们还可以用外边距(margin)来改变盒子的位置。 这也是一种方法可以单单作为一类，也可以作为另外一种方法。
未居中的代码······ 仅仅改动样式
.p .c {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
background-color: black;
}
在这里插入图片描述
通过外边距加工后居中的代码 其中的margin移动长度作为小盒子长宽的一半，通过简单的计算。 上代码！ 仅仅改动样式
.p .c {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
background-color: black;
}
在这里插入图片描述
NO.3 通过transition属性解决 先上代码！ 仅仅改动样式
.p .c {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
transform: translate(-50%, -50%);
background-color: black;
}通过分析发现translate里的50%相当于向做移动50px,这说明移动的是小盒子长宽的一半，所以里面的50%对于小盒子起作用，这是一种很好的应用。
translate对于行内样式不起作用！
translate的优点在于不会对其他元素产生影响，比如挤开，在有些情况下可以灵活运用。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读