很多刚刚学会静态页面布局的同学会遇到margin-top坍塌的问题,这个问题只能弥补,不能解决;
例如:
以下是分别给两个层级div加上左外边距(margin-left),发现父元素的div根据body位置移动,子元素是根据父元素位置移动;
html片段
<body>
<div class="wrapper">
<div class="content"></div>
</div>
</body>
css片段
*{
margin: 0;
padding: 0;
}
/*父元素*/
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
}
/*子元素*/
.content{
margin-left: 50px;
width: 50px;
height: 50px;
background-color: green;
}
运行后的画面展示:
更改css代码片段,在css中的子元素样式中添加小于父元素的上外边距(margin-top),子元素不会移动位置,相反的,若大于父元素的上外边距,子元素会连带父元素一起向下移动,这个就是父子元素在上外边距之间的坍塌问题。
1.父元素的上外边距大于子元素的上外边距
/*子元素*/
.content{
margin-left: 50px;
margin-top: 50px; /*注意:父元素外边距100px*/
width: 50px;
height: 50px;
background-color: green;
}
由图可见,子元素上外边距(margin-top)没有根据父元素的位置进行移动,由此可见,margin-top坍塌;
2.子元素的上外边距大于父元素的上外边距;
/*子元素*/
.content{
margin-left: 50px;
margin-top: 150px; /*注意:父元素上外边距100px*/
width: 50px;
height: 50px;
background-color: green;
由图可见,父随子动;
要想解决以上情况,至今没有完全解决的,只有根据css样式进行弥补;
弥补以上出现的问题,也称如何触发一个盒子的bfc(block format context)
/*父元素*/
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
/*弥补margin-top出现坍塌问题的四种方法*/
position: absolute;
display: inline-block;
float: left/right;
overflow: hidden;
}
以上是弥补margin-top坍塌的4种方法,根据不同的情况选择不同的弥补方法;