margin塌陷、margin合并

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;
}