相信大家對與margin是很熟悉的了吧茫因，那么咱們經常使用的margin-top，margin-bottom是相對于誰的呢杖剪，之前一直覺得是相對于父元素的height屬性冻押，因為畢竟是在縱軸上變化的，然而盛嘿，它卻是相對于父元素的width屬性的
怎么發(fā)現(xiàn)的呢洛巢？咱們還是用代碼來說話吧：
<div id="parent">
我是父元素啦
<div id="children">
我是子元素
</div>
</div>
我的css代碼如下：
#parent{
width:400px;
background-color:red;
}
#children{
background-color:grey;
}
那么此時我的頁面效果為：
那么我們來給子元素加個
margin-top試試吧：
#children {
margin-top: 50%;
}
而此時的效果為：
咦？這個百分比是相對于啥呢孩擂？
那我們再把父元素的寬度重新設置一下：
#parent {
width: 200px;
}
效果如下：
此時是不是覺得還是不愿意相信呢狼渊？好，那么我們給父元素加個高度試試看：
#parent {
width: 200px;
background-color: red;
height: 200px;
}
#children {
background-color: grey;
margin-top: 50%;
}
此時的效果為：
那么我們將父元素的高度發(fā)生變化类垦，寬度不要變：
#parent {
width: 200px;
background-color: red;
height: 100px;
}
那么效果如下：
現(xiàn)在應該了解了吧狈邑，原來自己一直錯了那么久
