啊？什么！margin-top的百分比竟然是相对于父元素的宽度

相信大家对与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;
        }

那么效果如下：

现在应该了解了吧，原来自己一直错了那么久