相信大家对与margin是很熟悉的了吧，那么咱们经常使用的margin-top，margin-bottom是相对于谁的呢，之前一直觉得是相对于父元素的height属性，因为毕竟是在纵轴上变化的，然而，它却是相对于父元素的width属性的
怎么发现的呢？咱们还是用代码来说话吧：
<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%;
}
此时的效果为：
那么我们将父元素的高度发生变化，宽度不要变：
#parent {
width: 200px;
background-color: red;
height: 100px;
}
那么效果如下：
现在应该了解了吧，原来自己一直错了那么久
