margin塌陷、margin合并

margin塌陷

原理:父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值。

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位。

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样。

margin合并

原理:两个兄弟结构的元素在垂直方向上的margin是合并的

<!-- margin塌陷 (垂直方向的margin，父子元素是结合到一起的，取最大值。)-->
<div class="wrapper">
<div class="content"></div>
</div>

<!-- margin合并(不解决) -->
<span class="box1">123</span>
<span class="box2">234</span>
<div class="demo1">1</div>
<div class="demo2">2</div>
<!-- bfc -->
<!-- block format context 块级格式化上下文 -->
<!--
如何触发一个盒子的bfc:
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;溢出盒子的部分要隐藏展示

-->

.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: #0f0;
/*position:absolute;*/
/*display:inline-block;*/
/*float:left/right;*/
/*overflow:hidden;*/
}

.content{
margin-left: 50px;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: #0ff;
}

.box1{
background-color: red;
margin-right: 100px;
}

.box2{
background-color: green;
margin-left: 100px;
}

.demo1{
background-color: red;
margin-bottom: 100px;
}

.demo2{
background-color: green;
margin-top: 100px;
}

• 点赞
• 收藏
• 分享
• 文章举报