day07 兩個經典bug: margin塌陷 與 margin合併。

1、margin塌陷

html

<div>
 	<div class="wrapper">
 		<div class="content"></div>
 	</div>
 </div>

css

.wrapper{
	margin-left:50px;
	margin-top: 50px;
	width:100px;
	height:100px;
	background-color: red;
	overflow: hidden;
}
.content{
	margin-left:50px;
	margin-top:80px;
	width:50px;
	height:50px;
	background-color: black;
 

***當子級content裡設定上外邊距 , 且高度小於父級時，子級並不會相對於父級向下移動。相當於父級沒有“頂”。

彌補辦法：在父級里加bfc語法，觸發bfc語法，改變渲染規則。 bfc: block format context 塊級格式化上下文 觸發bfc:

position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;

2、margin合併

  <div class="demo1"></div>
  <div class="demo2"></div>
 

css：

.demo1{
	height:100px;
	background-color: pink;
	margin-bottom:10px;
}

.demo2{
	height:100px;
	background-color: brown;
	margin-top:10px;
}

這種情況下demo1與demo2的上下margin會合並。 可在外面包裹一層父級，新增bfc語法，可避免這種情況。但在開發過程中，不能隨意修改增添html結構，常用數學方法彌補合併問題。