我正在追踪In Search of the Holy Grail,但是在理解步骤3中实际发生的事情时遇到了麻烦。

为了解决这个问题,我禁用了“左”和“右” div的边距/偏移。正如您所期望的那样,这将使内容位于顶部,然后将两个其他元素并排放置在其下面[请参见P1]。

然后,我逐渐将“ left” div的左边距从0px​​减小到-199px,这再次达到了我的期望[请参见P2]。

但是在-200px(左侧元素本身的宽度)处,它会射击到顶部[请参见P3],其左边缘与内容的右边缘相对。我本来希望它能一直保持优势。

为什么会跳起来?并且,如果没有关于原因的概念性解释,那么它将在规范中在何处描述该功能?

图片:

P1





P2





P3

最佳答案

请记住,#content#left(以及#right)都是浮动的。

由于浮子的性质,它们(或其内容物)可能会重叠。 this section of the spec中对此进行了很好的描述,并且相当容易理解。如果将负边距应用于与另一个浮动对象相邻的浮动元素,则该元素将仅向其同级元素的左侧移动(类似于具有left相对偏移量)。

float property的部分中,您将找到“控制浮点行为的精确规则”的列表。现在,我不是100%熟悉float模型,但是我认为这些要点是相关的:


  2.如果当前框是向左浮动的,并且源文档中较早的元素生成了任何向左浮动的框,那么对于每个这样的较早框,当前框的左侧outer edge必须在右侧右边的outer edge框的顶部,或者其顶部必须低于前面的框的底部。类似的规则适用于右上浮动的盒子1。
  
  7.一个左浮动框的左侧还有另一个左浮动框,其右外边缘可能不在其包含块的右边缘的右侧。 (松散:左浮动可能不会在右边缘突出,除非它已经尽可能地向左移动。)类似规则适用于右浮动元素。
  
  8.必须将浮箱放置在尽可能高的位置。
  
  9.必须将一个左浮动框放在尽可能左的位置,将一个右浮动框放在尽可能右的位置。较高的位置优先于左/右更远的位置。


所以我的猜测是:-200px的边距,正如您所说的#left元素本身宽度的负当量,会导致它一直向上浮动并一直向右(而不是向左)浮动。拥抱#center元素的边缘,该元素本身也浮动。由于此完全相等的负边距,两个元素的右边缘相互接触。因此,随着您继续增加(或减少?)负边距,您会看到#left元素继续向左移动。

注意,应用于#container元素的填充不会与边距交互;即使您删除任一侧或两侧的填充,边距也会以相同的方式交互。



1请注意,在规范的链接部分中的collapsing margins部分中,有一条语句描述了负边距的行为,但这并不重要,因为我们在此关注的边距是水平的并且属于浮动元素,因此永远不会崩溃。

09-10 11:47
查看更多