div {
width: 100px;
margin-left: auto;
}
假如父元素是flex
上述代码可以让某个子元素右对齐,为什么呢?
w3c 的规定:
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
除了 width 和 margin-left 其他值都是 0 ,把宽度值带入计算得到 margin-left = 包含块的宽度-100px 。所以最终 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.
也就是说些的auto就是平均分配margin-left和margin-right