外邊距塌陷（合并）問題：在嵌套元素中，給內(nèi)部元素設(shè)置外邊距會(huì)作用到外部元素上锰瘸，而無法達(dá)到想要效果
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
實(shí)現(xiàn)效果
目標(biāo)效果
解決辦法：
1刽严、給父級(jí)元素添加邊框：
.father {
width: 300px;
height: 300px;
background-color: pink;
border:1px solid white;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
2、給父級(jí)元素添加內(nèi)邊距：
.father {
width: 300px;
height: 300px;
background-color: pink;
padding:1px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
3避凝、給父級(jí)元素添加overflow：
.father {
width: 300px;
height: 300px;
background-color: pink;
overflow:hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
