【CSS】margin系列之auto
本文参考资料
http://dev.w3.org/csswg/css-box/#the-margin-properties
先闲扯
一般来说，我们用auto设置margin时，是用来水平居中的，如下例
CSS
#demo{ width: 200px; height: 200px; background: yellow; margin: 0 auto;/* 或者 auto */ }
HTML
<div id="demo"></div>
这样的话，demo同学就如我们所料水平居中了。
w3标准
你会发现，无论设置margin为 auto 还是 0 auto，demo都会水平居中，而垂直方向上margin-top都是0,，这是为什么呢？
看看w3标准是如何说的（http://dev.w3.org/csswg/css-box/#the-margin-properties）：
On the A edge and C edge, the used value of ‘auto’ is 0. On the B edge and D edge, the used value depends on the available space
即： A C 的 margin 为 auto 时，计算出的值是0;
B D 的 margin 为 auto 时，margin 值取决于可用空间
什么是A.B.C.D边呢？
We distinguish four roles for the edges of a box, called A edge, B edge, C edge and D edge. They depend on the ‘writing-mode’ and ‘direction’ properties of the box‘s containing block (defined below), and map to the four sides as follows:
ABCD是哪个边取决于‘writing-mode‘和‘direction‘的设置，如下图所示：
为什么 margin-left 和 margin-right 为 auto 会水平居中？
首先声明，这是在 ‘writing-mode‘ 和 ‘direction‘ 为默认值时的分析，如果设置的话，会根据上表所示展现。
重复一下规则：
A C 的 margin 为 auto 时，计算出的值是0;
B D 的 margin 为 auto 时，margin 值取决于可用空间
举个例子：
CSS
#demo{ width: 500px; background: yellow; } #demo p{ width: 100px; margin-left: auto; background: blue; }
HTML
<div id="demo">
<p>恩，我就是那个p。</p>
</div>
结果是
可以看到，p 相对于包含块右对齐了，margin-left 补全了左边空白，即margin-left = 500px - 100px = 400px。
由此可用想到，当 margin-left 和 margin-right 值都是 auto 时，左右部分均分了可用空间，因此块就水平居中了。
为什么 margin-top 和 margin-bottom 为 auto 不会垂直居中？
原因在另一篇文章中指出：【CSS】margin系列之百分比
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
