css - 如何解释这种现象

问题描述

问 题

<style>
.f{width: 500px;height: 500px;background: yellow;}
.f p{position: absolute;}
</style>

<div class="f">
    <p>fewfw</p>
</div>

上面会有空隙，如果去掉position: absolute或将*{margin:0;border:0;padding:0}就好了。
可是，为什么只要添加position: absolute;就会出现空隙，而不添加就没有呢？

解决方案

你给p设置绝对定位，它会脱离文档流，而它的父级.f没有设置定位，它会脱离.f，所以它现在是独立出来的块，不在.f里面，而p标签本身就有margin值，所以它会出现空隙；
去掉绝对定位，p会在.f里面，而p自身的margin-top会让整个父级.f下移，这个时候需要出发BFC在.f中添加 overflow:hidden，这样.f就不会下移，而p自带的margin会让它在.f里面下移产生空隙，视觉效果跟你的图一样。

这篇关于css - 如何解释这种现象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！