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

【问题标题】：Why setting margin-left to auto moves div to right side为什么将 margin-left 设置为 auto 将 div 移动到右侧
【发布时间】：2016-01-02 17:46:58
【问题描述】：

我想知道为什么将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。

【问题讨论】：

标签： css css-position

【解决方案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}

【讨论】：

链接信息是否与此链接w3.org/TR/CSS21/visudet.html#blockwidth 相同。基本上这两个页面之间的区别是什么？
不一定有任何区别。 CSS 2.2 是一个草案，其中包含修复 CSS 2.1 中的勘误表的更改。因为过去我错过了勘误表，所以默认情况下我现在链接到 CSS 2.2 草案。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：