版权声明:本文为博主原创文章,若文章中有错误请联系博主改正,请不要恶意留言(不喜欢请绕道)。欢迎大家转载,转载时请注明原文地址: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)
那么大家来看这个案例:
以上内容仅个人观点,如有不对请留言指正,谢谢!