css - margin值移动变成相对于body?
本文介绍了css - margin值移动变成相对于body?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
*{
margin:0;
padding:0;
}
.back{
height: 100vh;
width: 100vw;
background:url("./b1.jpg") 0 0/100% auto fixed;
}
.content{
border:3px solid black;
position: relative;
height: 300px;
width:570px;
margin:10% auto;
}
.content::before{
content: '';
display: block;
position: absolute;
left:0;top:0;right: 0;bottom:0;
}
html:
<div class='back'>
<div class='content'></div>
</div>
代码如上,content里的margin-top应该相对于back的top啊 为什么现在的效果成了相对于body的top取margin 10%;
我要的效果是back在顶端,content在他里面类似于居中
解决方案
因为margin重叠了,block 水平元素其中的一中margin重叠情况就是你写的这种,父元素和子元素重叠。
解决方法很多种
1.可以用back的padding代替
2.<div class='back'>
<div class='content'></div>
</div>
3.给back{overflow:hidden}
还有很多方法掌握几个常用的就可以了。
这篇关于css - margin值移动变成相对于body?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文