【问题标题】:the concept of negative margins - have i understood?负边距的概念 - 我明白了吗?
【发布时间】:2012-11-18 22:51:25
【问题描述】:

我读到负 margin-top 和 left 获取元素并将其推向这个方向。另一方面,负的底部和右侧边距将其余内容绘制在元素上。

问题

我有一个浮动元素 float:right;包裹在body标签中。负左边距会将其向左移动。

负的 RIGHT 边距根本不会做任何事情,因为文档在负边距开始的地方结束并且没有任何东西可以覆盖元素(或拉过它)?

我说的对吗?

【问题讨论】:

  • 你为什么不测试呢?
  • 我做了并且我描述的事情发生了,我不需要一个hacky修复,我想完全理解这个概念。
  • 尝试使用 float:right 设置负右边距。你会感到惊讶;)
  • 负右边距和上边距在我的 Firefox 中确实有效:jsfiddle.net/29g39/1/show
  • sime,只有上边距在您的演示中有效,证实了我所说的

标签: html css margin


【解决方案1】:

负边距将始终像正边距一样在块框上起作用。他们只是沿与正边距相反的方向移动一个框和/或周围的框。哎呀,负边距甚至可以collapse

如果发生任何溢出,则相关框将调整并适应此框的移动。

如果一个元素在某个方向上浮动,那么它被浮动的一侧的边距会影响它自己的位置,而相对位置上的边距会相对于任何后续的浮动来影响它。

负右边距根本不会做任何事情,因为文档在负边距开始的地方结束并且没有任何东西可以在元素上绘制(或拉过它)?

没有。有一个东西叫做canvas,理论上有无限的扩展空间。是否有将元素推出页面主体或页面根目录的边距? NBD,只需在那个方向展开画布,在视口中制作一个用于显示此画布的滚动条,就完成了。

这就像您在其父元素具有 overflow: auto 的元素上具有负边距一样,因为 the root element itself has overflow: auto by default (因为您实际上不可能有明显溢出浏览器窗口本身的东西......)。

jsFiddle proof-of-concept

【讨论】:

    【解决方案2】:

    许多人都对负利润率抱有同样的误解。您描述的行为往往与许多负边距案例相匹配,但它是从有缺陷的角度解释它们。实际上,负边距在框的任何侧具有相同的效果,但在“移动框”或“在其中绘制其他内容”方面则不然。

    例如,left-margin: -20px 表示“定位元素,就好像它的左边缘距其真正的左边缘向内 20 像素”。 right-margin: -20px 的意思完全一样,只是在右边。

    在您提供的简单描述中,负左边距确实会将元素本身向左移动,因为它的 left edge 与前一个元素的 right edge 相邻放置,但是浏览器会假装我们元素的左边缘实际上是移动向右,所以元素本身的内容看起来移动了向左

    使用负的右边距,浏览器将下一个元素的左边缘与我们元素的右边缘相邻,但它假装我们元素的右边缘 被移动向左,因此下一个元素本身似乎被移动向左

    在这两种情况下,唯一改变的是浏览器对元素边缘位置的概念。

    当你有一个右浮动元素时,浏览器会定位它,使其右边缘与前一个右浮动元素的左边缘相邻,或者如果没有前一个右浮动元素,它会靠近其父位置的 边缘(这是最接近的父元素,其position 样式不是static)。在您的情况下,您没有先前的右浮动元素,因此浏览器定位您的元素,使其右边缘与父元素的右边缘相邻,但它假装你的元素的右边缘被移动向左,所以你的实际内容被移动向右,突出到父元素之外。

    Here is a demonstration。带有蓝色边框的框的左右边距为负数。它里面的黄色框代表浏览器如何看待它——它比蓝色边框的框窄,因为负边距告诉浏览器向内移动它的边缘,从元素的实际大小中吃掉。如您所见,它的定位框与任何元素的放置方式完全相同,在两侧接触其左右兄弟姐妹。并且实际内容在两个方向上的扩展量完全相同,因为它的负边距是相同的。 感知到的变化是元素本身由于左边距向左移动,而后面的内容由于右边距向左移动,但是如您所见,实际上,效果正是两边都一样。

    【讨论】:

      【解决方案3】:

      负右边距确实有效! http://fiddle.jshell.net/H6mjC/

      【讨论】:

        【解决方案4】:

        还做了一个小提琴。当然负边距是有效的。

        fiddle with negative margin

        enter code here
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2012-09-15
          • 2020-07-14
          • 1970-01-01
          • 2012-11-11
          • 2015-03-08
          • 2011-08-10
          • 2015-12-27
          • 1970-01-01
          相关资源
          最近更新 更多