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

Question

我想知道为什么将 div 和 id="pink" 的 margin-left ib 设置为自动将 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

Auto 告诉它填充可用的 space。这将是容器宽度减去 div.

的宽度

Answer 2

在将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 据说是 over-constrained。因此 margin-right 属性被覆盖并计算为让等式成立的值。这会将 div 的内容框放在容器的左侧。

当设置margin-left:auto时，div不再是over-constrained，并且margin-left的值将被计算以使上面的等式成立。这会在容器右侧留下内容框。

_{作为提示，您很值得考虑一下这个等式。整个 class 的 CSS 布局现象可以通过了解它的应用方式来解释。完整的细节在 https://drafts.csswg.org/css2/visudet.html#blockwidth}

Answer 3

如果您希望将 #pink center-aligned 设置为自动，则应将 margin-left 和 margin-right 都设置为自动。

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

Why setting margin-left to auto moves div to right side

css

css-position