最近研究css中遇到一個問題，業務情景是這樣的：在body內，有兩個div，div1是父元素，div2是子元素，設置div2的margin-top引起div1的變化，div2卻沒有變化。
先上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>divtest</title>
<style type="text/css">
body {
margin: 0;
padding: 0px;
}
#div1 {
width: 200px;
height: 200px;
background: yellow;
}
#div2 {
height: 100px;
width: 100px;
background: red;
margin: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
目前具體的理論原因我沒有研究明白，但是一些解決方案可以解決這個問題：
1.div1設置border屬性
2.div2設置position爲absolute或者relative，並且設置top left等屬性。
3.div1可以通過設置padding屬性。
