margin系列之keyword auto
margin系列之keyword auto
原作者：doyoe
原文地址：http://blog.doyoe.com/2013/11/29/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bkeyword%20auto/
margin的重要性：
有個(gè)不容置疑的事，前端開發(fā)人員沒有人能夠忽視CSS margin的重要性。CSS coding時(shí)，margin的使用頻率就如同呼吸般頻繁，如果我可以說得夸張點(diǎn)的話。
margin作為CSS盒模型基本組成要素之一，是非常Basis的一個(gè)技術(shù)手段，所以我想對(duì)于它的一些基本情況應(yīng)該不用太介紹了？
margin經(jīng)常被用來做什么？
- 讓塊元素水平居中；
- 讓元素之間留有舒適的留白；
- 處理特殊的first或last，大家懂的？
- 一些布局；
需要注意的地方：
- margin折疊；
- margin的百分比值；
- margin的auto值；
- margin和相對(duì)偏移top, right, bottom, left的異同；
- IE6浮動(dòng)雙margin Bug；
- IE6浮動(dòng)相鄰元素3px Bug；
看起來似乎有不少的知識(shí)點(diǎn)？恩，這些都是我們需要了解的，包括一些沒有被列舉出來的點(diǎn)。
今天要講的其實(shí)只是其中很少的一部分，恩，標(biāo)題里有：keyword auto
keyword auto
auto是margin的可選值之一。相信大家平時(shí)使用auto值時(shí)，最多的用法大概是 margin: 0 auto; 和 margin: auto;，恩，是的，塊元素水平居中。讓我們來看看代碼實(shí)現(xiàn)：
CSS:
#demo{
width: 500px;
margin: auto; /* 或者 margin: 0 auto; */
}HTML:
<div id="demo">
<p>恩，我就是那個(gè)需要水平居中的家伙。</p>
</div>為了更明顯點(diǎn)，我們來看個(gè)例子：margin實(shí)現(xiàn)塊元素水平居中。Cool，這么簡(jiǎn)單就實(shí)現(xiàn)了水平居中。
不過你可能也發(fā)現(xiàn)了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的，都是讓 #demo 水平居中了，但縱向并沒有任何變化。
大家都知道 margin 是復(fù)合屬性，也就是說 margin: auto; 其實(shí)相當(dāng)于 margin: auto auto auto auto;，margin: 0 auto;相當(dāng)于 margin: 0 auto 0 auto;，四個(gè)值分別對(duì)應(yīng)上右下左。至于CSS中的上、右、下、左順序就不做贅述了。
根據(jù)規(guī)范，margin-top: auto; 和 margin-bottom: auto;，其計(jì)算值為0。這也就解釋了為什么 margin: auto; 等同于 margin: 0 auto;。但僅此而已嗎？讓我們來看看規(guī)范描述：
原文：On the A edge and C edge, the used value of ‘a(chǎn)uto’ is 0.
翻譯：如果場(chǎng)景是A和C，那么其 auto 計(jì)算值為 0。
更詳細(xì)請(qǐng)參閱：margin properties
由此可見，它們還與書寫模式 writing-mode 和 文檔流方向 direction 有關(guān)。所以我們說 margin: auto; 等同于 margin: 0 auto; 是不太精準(zhǔn)的，因?yàn)檫€有前置條件。
了解這些很重要，這有助于理解 margin 屬性的設(shè)計(jì)意圖。
OK，聊了這么多，我們回到默認(rèn)的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況繼續(xù)往下，后面的話題都基于這個(gè)前提。
為什么auto能實(shí)現(xiàn)水平居中？
這是因?yàn)樗椒较虻?auto，其計(jì)算值取決于可用空間（剩余空間）。
原文：On the B edge and D edge, the used value depends on the available space.
翻譯：如果場(chǎng)景是B和D，那么其auto計(jì)算值取決于可用空間。
想象這樣一個(gè)場(chǎng)景，一個(gè)寬100px的p被包含在一個(gè)寬500px的div內(nèi)，此時(shí)設(shè)置 p 的 margin-left 值為 auto，大家覺得結(jié)果會(huì)怎樣？
CSS:
#demo{
width: 500px;
}
#demo p{
width: 100px;
margin-left: auto;
}HTML:
<div id="demo">
<p>恩，我就是那個(gè)p。</p>
</div>結(jié)果你猜到了嗎？沒猜到也不怕，用事實(shí)說話：margin-left關(guān)鍵字auto結(jié)果猜想。
好了，結(jié)果得到了，p相對(duì)于包含塊右對(duì)齊了，這與規(guī)范描述一致。margin-left:auto; 自動(dòng)占據(jù)了包含塊的可用空間，即 500 - 100px = 400px。也就是說auto最后的計(jì)算值為400px，即 margin-left:400px;。所以 margin-right:auto; 的結(jié)果會(huì)相當(dāng)于左對(duì)齊。
到這里，相信大家都知道為什么 margin: auto; 和 margin: 0 auto; 能實(shí)現(xiàn)水平居中了。因?yàn)樽笥曳较虻腶uto值均分了可用空間，使得塊元素得以在包含塊內(nèi)居中顯示。
至于垂直方向上為什么無法居中，還有更深層的原因嗎？大家可以思考一下。
更多建議：