版权声明：本文为博主原创文章，若文章中有错误请联系博主改正，请不要恶意留言(不喜欢请绕道)。欢迎大家转载，转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/81568944
下面是追溯过程：
1.关于外边框基准问题（参照点）
下面我们来分析几个案例:
案例的代码 大致如下:
<style>
*{
margin:0;
}
.box{
width: 1000px;
height: 500px;
background-color: teal;
}
.left{
width:100px;
height: 100px;
margin-top: 10px;
background-color: orange;
}
</style>
<body>
<div class="box" >
<div class="left" >
</div>
</div>
</body>
案例一
如果此时给.left加入 margin-top:50%;
* 关于margin-top中 % 是以父元素的宽度为基准进行计算
有人就会问，不对啊，我给子元素加的 margin-top 为什么父元素也下移呢？
那先看下面这个案例:
案例二
案例三 如果我给 .box div中加入文字呢？
案例四
我们从案例一和案例二中看到，margin-top的参考点都是视口上方。案例三中我们发现，margin-top的参考点是相对文字底部,这也就是案例三中橙色上面有一片空白的地方原因。
结论：如果父元素中有内容的时候，子元素的外边距是相对父元素内容，如果没有内容则一直向上追溯寻找如果都没有找到(案例四中可以看到)，最终以浏览器视口为参考点。
或者创建一个[BFC](https://blog.csdn.net/qq_37674616/article/details/90606744)
那么大家来看这个案例:
以上内容仅个人观点，如有不对请留言指正，谢谢！
652
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
