Html 边距规则如何应用于不在DOM流中的元素？

所以我问了这个问题：这最终让我意识到

top

和

margintop

不是一回事。我不知道这些年来我是怎么错过的

不管怎样，这让我想到了

margintop

和

top

之间到底有什么区别，这就是我发现这个问题的原因：

我已经知道页边空白处做了什么。但我从来没有推断出这一点来思考“嗯，这个元素不在DOM流中，那么

边距顶部

到底是什么将它推离的？”

从我问的问题中，我知道

边距顶部

在应用于具有

固定

位置的元素时会以非常意外的方式运行。至少在Chrome中，这会导致一些疯狂的规则（比如

利润率上限：-273%；

）

---

所以我的问题是：浏览器如何将

margin

规则应用于DOM流之外的元素（即

位置

值为

固定

或

绝对

的元素。它们的应用和呈现方式会导致规则，如上文所述，实际呈现视图端口内的元素。

属性仅确定距包含元素顶部的距离nt表示应开始渲染长方体模型。在

位置：固定的情况下，即窗口本身。在
位置：绝对的情况下，它是具有非静态位置的下一个父元素

另一方面，边距是长方体模型本身的一部分。向长方体顶部添加边距会增加长方体上方的空白


考虑以下层作为
位置：固定的
框：

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

所有的边距、边框和填充都是长方体模型的一部分。整个元素或“块”，在定位时只是一个大正方形。因此，如果框的顶部有10px的边距，并且从顶部定位元素10px，那么它将在窗口顶部和可见框开始的位置之间有20px的边距

我也做了一个决定


如果您喜欢图形，请以这个示例为例，其中红色框有一个
位置：fixed
：


正如您在第一节中所看到的，仅在元素上设置
position:fixed
，实际上并不会将其移动到任何位置，它只是将其从文档流中移除

在小节中，添加一个
边距顶部：10px
会使元素向下移动10px，因为长方体顶部现在有10px的边距。但是，它实际上没有移动到任何地方。。长方体变得更高，因为长方体模型已更改

在第三部分中，使用
top:10px
实际上会将框从窗口容器顶部移动到10px。它与第一部分中的框模型完全相同

第四部分与上面的第二部分类似，只是负边距使其向上移动了10个像素。长方体模型仍然较高，长方体仍然没有移动


在元素上设置绝对位置时，如果不设置任何其他位置属性，元素将不会移动。因此，如果没有
顶部
、
右侧
、
底部
、或
左侧
属性集，元素将保持在作为t的一部分渲染时所处的位置流，它刚刚从流中移除。因此，添加一个边距，无论是正的还是负的，都会使它看起来从该位置向上或向下移动。实际上，您只是在更改元素的长方体模型

您还必须认识到，在上下页边距（甚至填充）上使用百分比与高度无关。它实际上使用宽度来计算有多少边距。说
边距顶部：10%
将使该值成为可用宽度的10%，而不是可用高度，如果将其设为负值，则只会否定该值。我提到这一点是因为它与f相关您链接的第一个问题是您在哪里使用
利润率顶部的百分比

我希望这涵盖了您所寻找的内容。我不知道您到底对什么感到困惑，所以我只是尽可能多地解释了一下。
是的，对于我的问题，我知道盒子模型。我想问的是，
margin
如何应用于不在DOM流中的东西，因为从我的经验来看第一个问题是，它没有将规则应用于窗口，而这正是我所期望的行为。这个可视化示例有帮助吗？