margin-left: auto;为什么可以使的元素靠右

如图!

div {
  width: 100px;
  margin-left: auto;
}

上面的代码可以使得div靠近浏览器的右侧显示是为什么?

回复
阅读 15.9k
3 个回答

margin-right 不设置的话默认是0,width 定宽之后,margin-left取值为 auto ,自动占据了剩余的全部宽度,具体见 《css权威指南》 P170

楼上解答正解。
跟你详细解释一下吧。

The following constraints must hold among the used values of the other properties:

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

你的属于其中一种情况:
If there is exactly one value specified as 'auto', its used value follows from the equality.

也就是在上述等式中,只有你设置的margin-left: auto,那么margin-left将会被设置为满足上述等式,而等式的右边是容器盒子宽度,等式中的其它值(除过width)都为0,因此margin-left = width of containing block - width(div)

再来看一下我们经常使用的 margin: auto 水平居中的原理。

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

这个直接看 w3c 的规定就可以明白(中文版规定英文版规定)。以下引用中文版相关部分:

常规流中的块级非置换元素需要满足: 'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含塊的寬度

若恰好只有一個值被指定為 'auto',則該使用值由等式求出

你的问题中除了 width 和 margin-left 其他值都是 0 ,把宽度值带入计算得到 margin-left = 包含块的宽度-100px 。所以最终 div 会靠近包含块的右边。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏