当我们需要实现一个盒子里包含着子盒子,并且父盒子距离顶部需要一个margin值的时候,可以l利用css属性来哦设置;
但是我们还想要利用margin来让子盒子实现距离父盒子有一个值时,我们就会发现父盒子会东,但是子盒子相对于父盒子还是没有发生移动;
这是只改变父盒子的margin
我们想改变子盒子想到对于父盒子的margin值,如果直接给子盒子添加值的话,会发生塌陷的问题
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
margin-top: 100px;
}
.son {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 200px;
}
</style>
<div class="father">
<div class="son">
</div>
</div>
如果我们直接这样做,就会出现塌陷
image.png
我们要实现的的是子盒子相对于与父盒子来说是有一个margin-top的值
可以使用3种方法:
1.可以给父盒子设置边框
设置边框
css代码:
width: 400px;
height: 400px;
background-color: pink;
margin-top: 100px;
border-top: 1px solid transparent;
}
.son {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 200px;
}
2.通过添加padding值
width: 400px;
height: 400px;
background-color: pink;
margin-top: 100px;
/* border-top: 1px solid transparent; */
padding-top: 1px;
}
.son {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 200px;
}
前两种方法会改变盒子的大小,我们在盒子的高度上减去1px就可以了
3.通过overflow:hidden;属性来设置,这种就不会改变盒子的大小了
width: 400px;
height: 400px;
background-color: pink;
margin-top: 100px;
/* border-top: 1px solid transparent; */
/* padding-top: 1px; */
overflow: hidden;
}
.son {
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 200px;
}
