从Position：absolute到margin的合并

最新推荐文章于 2022-03-14 21:44:40 发布

pppjf

最新推荐文章于 2022-03-14 21:44:40 发布

阅读量976

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS html w3c margin

本文链接：https://blog.youkuaiyun.com/qq_31359337/article/details/60152277

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在CSS中，将父元素设置为Position：absolute如何影响元素的显示，尤其是margin的合并行为。通过实例展示了Position:absolute如何触发display:inline-block效果，并解释了如何阻止外边距折叠，涉及到BFC（块级格式化上下文）的概念。总结了position:absolute与display:inline-block触发BFC并阻止margin合并的现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：http://blog.youkuaiyun.com/qq_31359337/article/details/60152277

问题起因：

在设置父元素Position：absolute之后发现了一些有趣的事情

Html & Css

<style type="text/css">
.a{
    position:absolute;
    background-color: #cad5eb;
}
</style>


<body>
    <p class="a">SOME</p>
</body>

效果：

初始的状态

当我们将Css代码改为：

<style type="text/css">
.a{
    background-color: #cad5eb;
}
</style>

效果：
这里写图片描述
在不加absolute时，有两种不同：

a所占的是完整的一行
元素距离上边框的距离也有变化。（此时不太明显，稍后再看）

为什么？

一、通过网上的信息，发现Position:absolute是可以触发display：inline-block效果的，于是我把Css代码再次替换为：

.a{
    display:inline-block;
    background-color: #cad5eb;
}

和
.a{
    background-color: #cad5eb;
}

效果：

发现用display:inline-block是可以实现和Position:absolute一样的效果的。
而display:inline-block会使元素以内联块状元素显示.
我们直观的上看两种盒子模型的区别:
1. 块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。
2. 块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。。
3. 块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。

因此可以理解第一处不同，因为使用inline-block后其大小与内部文字大小相符合。

二、第二处不同目前看来不明显，但是改动一处就会看起来很明显。
我在Chrome浏览器下使a的margin改为50px,且父元素body的margin-top变为50px,之后再执行

.a{
    display:inline-block;
    background-color: #cad5eb;
}

和
.a{
    background-color: #cad5eb;
}

前后的到顶端的距离差距就很明显了。
不用inline-block:
这里写图片描述
使用inline-block:

那么我们可以推测这和margin有关，而这里又要提到BFC了，我们知道BFC可以阻止外边框折叠，具体如下说来：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。
而BFC是可以通过Position:absolute和Display:inline-block触发的，下面我们来验证。

.a{
    display: inline-block;
    margin: 50px;
    background-color: #cad5eb;
  }
body{
    margin-top: 50px;
    margin-bottom: 0px;
}

不用inline-block时(橙色区域为margin)
1.父元素body的margin

2.子元素p的margin
用inline-block时
1.父元素body的margin

2.子元素p的margin

经过对比可以发现当使用inline-block时，子元素框的margin-top和父元素的margin未合并，而是像图中相邻：
这里写图片描述
而未使用inline-block时，则会发生合并：

总结：
1. position:absolute导致dispaly:inline
2. position:absolute和display:lnline都会触发BFC
3. BFC可以阻止margin合并

参考：理解CSS外边距margin