html – 保证金规则如何应用于不在DOM流中的元素？

另一方面,保证金是盒子模型本身的一部分.在框顶部添加边距会增加框上方的空白区域.

考虑以下位置图层：固定框：

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

所有边距,边框和填充都是框模型的一部分.整个元素或“片段”在定位时只是一个大方块.因此,如果盒子顶部有10px的边距,并且从顶部开始放置元素10px,它将在窗口顶部和可见框开始之间具有20px的边距.

我也做了一个very simple example in jsFiddle.

如果你喜欢图形,那么举个例子,红色框有一个位置：fixed：

正如您在第一部分中看到的那样,只有固定在元素上的设置位置实际上并未将其移动到任何位置.它只是将其从文档流中删除.

在section部分中,添加margin-top：10px使元素向下移动10px,因为该框现在顶部有10px的边距.然而,它实际上并没有移动到任何地方.盒子刚刚变高,因为盒子模型已经改变了.

在第三部分中,使用top：10px实际上将框移动到窗口容器顶部10px.它具有与第一部分完全相同的盒子模型.

第四节就像它上面的第二部分,除了负边距使它向上移动十个像素.盒子模型仍然更高,盒子仍然没有移动.

在元素上设置绝对位置时,如果未设置任何其他位置属性,则元素根本不会移动.因此,如果没有顶部,右侧,底部或左侧属性集,则元素将保持在它作为流的一部分呈现时所处的位置,它现在刚刚从流中移除.因此,添加正面或负面的边距会使其看起来从该位置向上或向下移动.实际上,你只是在改变元素的盒子模型.

您还必须意识到,在顶部和底部边距(甚至填充)上使用百分比与高度无关.它实际上使用宽度来计算出有多少边距.说边缘顶部：10％将使该值为可用宽度的10％,而不是可用高度,并且使其为负值将仅取消该值.我之所以提到这一点,是因为它与您在使用margin-top百分比时所链接的第一个问题相关.

我希望这涵盖了你所寻找的东西.我无法分辨你究竟是什么感到困惑,所以我尽可能地解释了.