为什么将 margin-left 设置为自动将 div 移动到右侧

Question

我想知道为什么将 margin-left ib 设置div为id="pink"自动将 div 移动到右侧的原因。请看图片图片：

超文本标记语言

 <div id="aqua">aqua</div> 
 <div id="yellow">yellow</div> 
 <div id="pink">pink</div>

CSS

#aqua, #yellow, #pink { border:1px solid blue;}

#pink { width:150px;
   margin-left:auto;
 }

请检查这个小提琴。

Answer 1

在设置为 之前margin-left，autodiv 的边距和内边距均为零宽度，并且边框设置为 1px 宽度。

对于正常流中的块级元素，方程

'margin-left' + 'border-left-width' + 'padding-left' + 'width' 
+ 'padding-right' + 'border-right-width' + 'margin-right' 
= width of containing block

必须持有。但设置了所有值后，这种情况就不可能发生，并且 div 被认为是过度约束的。因此，margin-right 属性被覆盖并计算为使方程成立的值。这会将 div 的内容框放置在容器的左侧。

设置后margin-left:auto，div 不再受到过度约束，并且将计算 margin-left 的值，以使上面的等式成立。这会将内容框保留在容器的右侧。

_{作为提示，您很有必要认真思考一下这个等式。一整类 CSS 布局现象可以通过理解它的应用方式来解释。完整详细信息位于https://drafts.c​​sswg.org/css2/visudet.html#blockwidth}