保证金规则如何适用于不在DOM流程中的元素？

Question

所以我问这个问题:谷歌浏览器的问题有固定的位置和边距它终于让我认识到,top和margin-top不一样的东西.我不知道这些年来我多么想念.

反正这让我的思维有什么区别究竟之间margin-top和top,这是我发现这个问题:CSS:顶VS边距.

我已经知道做了什么margin-top.但我从来没有推断出这个想法"嗯,这个元素不在DOM流程中,那究竟是什么margin-top推动它远离？"

从我问的问题中我知道,margin-top当应用于具有fixed位置的元素时,它会以非常意外的方式运行.而在Chrome中,至少这可能导致一些疯狂的规则(如margin-top: -273%;).

所以我的问题是:如何做浏览器应用margin规则的DOM流元素不是(即元素具有position的价值fixed或absolute对他们的应用和渲染导致的规则,就像上面所描述的方式和内容,实际渲染的元素.在视口内？

Answer 1

该top属性仅确定盒模型应开始渲染距包含元素顶部的距离。在 的情况下position: fixed，即窗口本身。在 的情况下position: absolute，它是具有非静态位置的下一个父元素。

另一方面，边距是盒子模型本身的一部分。在框的顶部添加边距会增加框上方的空白空间。

考虑盒子的以下层position: fixed：

               top:10px
            margin-top:10px
------------border-top:1px------------
           padding-top:10px
  content

所有的边距、边框和填充都是盒子模型的一部分。整个元素，或“一块”，在定位时只是一个大方块。因此，如果框的顶部有 10px 的边距，并将元素定位在距顶部 10px 的位置，则窗口顶部和可见框开始处之间的边距将看起来为 20px。

我还在jsFiddle 中做了一个非常简单的例子。

如果您喜欢图形，请看这个例子，其中红色框有一个position: fixed：

正如您在第一部分中所看到的，仅对position: fixed元素进行设置实际上并不会将其移动到任何地方。它只是将其从文档流中删除。

在部分部分中，添加 amargin-top: 10px会使元素向下移动10px，因为该框现在在其顶部有 10px 的边距。然而，它实际上并没有移动到任何地方。由于盒子模型发生了变化，盒子变得更高了。

在第三部分中，使用 atop: 10px 实际上将框移动到距窗口容器顶部 10px 的位置。它具有与第一部分完全相同的盒子模型。

第四部分与上面的第二部分类似，只是负边距导致它向上移动十个像素。盒子模型仍然更高，盒子仍然没有移动。

当您在元素上设置绝对位置时，如果您不设置任何其他位置属性，则该元素根本不会移动。因此，如果没有top、right、bottom或left属性集，该元素将保持在其作为流的一部分呈现时所处的位置，现在刚刚从流中删除。因此，添加边距（无论是正数还是负数）都会使其看起来从该位置向上或向下移动。实际上，您只是更改元素的盒子模型。

您还必须意识到，在顶部和底部边距（甚至填充）上使用百分比与高度无关。它实际上使用宽度来计算有多少边距。说margin-top: 10%将使该值成为可用宽度的 10%，而不是可用高度，并且将其设为负数只会否定该值。我提到这一点是因为它与您在使用百分比时链接的第一个问题相关margin-top。

我希望这涵盖了您正在寻找的内容。我不知道你到底对什么感到困惑，所以我只是尽可能地解释。