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

Question

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

HTML

 <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;
 }

请检查Fiddle。

Answer 1

在将margin-left设置为auto之前，div的边距和填充均为零宽度，边框设置为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.csswg.org/css2/visudet.html#blockwidth}

Answer 2

自动告诉它填充可用空间。这将是容器宽度减去div的宽度。

Answer 3

如果您希望#pink居中对齐，则应将margin-left和margin-right都设置为自动。