我读到负边距顶部和左侧采用元素并将其推向这个方向。另一方面,负的底部和右侧边距将其余内容绘制在元素上。
问题
我有一个浮动元素 float:right; 包裹在body标签中。负左边距会将其移动到左边。
负的 RIGHT 边距根本不会做任何事情,因为文档在这个负边距开始的地方结束并且没有任何东西可以覆盖元素(或拉过它)?
我对么?
负边距将始终以与正边距相同的方式在块框上起作用。他们只是在与正边距相反的方向移动一个盒子和/或周围的盒子。哎呀,负利润率甚至会崩溃。
如果发生任何溢出,则相关框将调整并适应该框的移动。
如果一个元素在某个方向上浮动,那么它被浮动的一侧的边距会影响它自己的位置,而相对位置上的边距会相对于任何后续的浮动来影响它。
负的 RIGHT 边距根本不会做任何事情,因为文档在这个负边距开始的地方结束并且没有任何东西可以覆盖元素(或拉过它)?
不,有一个东西叫做画布,理论上有无限的扩展空间。是否有将元素推出页面主体或页面根目录的边距?NBD,只需在那个方向展开画布,在用于显示此画布的视口中制作一个滚动条,就完成了。
这就像您在其父元素上具有负边距一样overflow: auto
,因为根元素本身overflow: auto
默认具有(因为您不能真正让东西明显溢出浏览器窗口本身......)。
负右边距确实有效!http://fiddle.jshell.net/H6mjC/
许多人对负利润率也有同样的误解。您描述的行为往往与许多负边距案例相匹配,但它是从有缺陷的角度解释它们。实际上,负边距在框的任何一侧都具有相同的效果,但在“移动框”或“在其中绘制其他内容”方面则不然。
例如,aleft-margin: -20px
表示“将元素定位为好像其左边缘距其真正的左边缘向内 20 像素”。Aright-margin: -20px
表示完全相同的东西,但用于右边缘。
在您提供的简单描述中,负左边距确实会将元素本身向左移动,因为它的左边缘与前一个元素的右边缘相邻,但浏览器会假装我们元素的左边缘实际上是向右移动的,所以元素本身的内容出现向左移动。
使用负的右边距,浏览器将下一个元素的左边缘与我们元素的右边缘相邻,但它假装我们的元素的右边缘向左移动,因此下一个元素本身看起来向左移动。
在这两种情况下,唯一改变的是浏览器对元素边缘位置的概念。
当你有一个右浮动元素时,浏览器会定位它,使其右边缘与前一个右浮动元素的左边缘相邻,或者如果没有前一个右浮动元素,它将与其位置父元素的右边缘(它是最近的父元素,其position
样式不是static
)。在您的情况下,您没有先前的右浮动元素,因此浏览器定位您的元素,使其右边缘与父元素的右边缘相邻,但它假装您的元素的右边缘向左移动,因此您的实际内容是向右移动,突出到父元素之外。
这是一个演示。带有蓝色边框的框的左右边距为负数。它里面的黄色框代表浏览器如何看待它——它比蓝色边框的框窄,因为负边距告诉浏览器向内移动它的边缘,从元素的实际大小中吸取。如您所见,它的定位框与任何元素的放置方式完全相同,在两侧接触其左右兄弟姐妹。并且实际内容在两个方向上的扩展量完全相同,因为它的负边距是相同的。感知到的变化是元素本身由于其左边距而向左移动,而随后的内容由于其右边距而向左移动,但是正如您所看到的,实际上,两边的效果完全相同。