margin系列之keyword auto

2018-05-12 17:21 更新

margin系列之keyword auto

原作者:doyoe
原文地址:http://blog.doyoe.com/2013/11/29/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bkeyword%20auto/

margin的重要性:

有個不容置疑的事,前端開發(fā)人員沒有人能夠忽視CSS margin的重要性。CSS coding時,margin的使用頻率就如同呼吸般頻繁,如果我可以說得夸張點的話。

margin作為CSS盒模型基本組成要素之一,是非常Basis的一個技術手段,所以我想對于它的一些基本情況應該不用太介紹了?

margin經(jīng)常被用來做什么?

  • 讓塊元素水平居中;
  • 讓元素之間留有舒適的留白;
  • 處理特殊的first或last,大家懂的?
  • 一些布局;

需要注意的地方:

  • margin折疊;
  • margin的百分比值;
  • margin的auto值;
  • margin和相對偏移top, right, bottom, left的異同;
  • IE6浮動雙margin Bug;
  • IE6浮動相鄰元素3px Bug;

看起來似乎有不少的知識點?恩,這些都是我們需要了解的,包括一些沒有被列舉出來的點。

今天要講的其實只是其中很少的一部分,恩,標題里有:keyword auto

keyword auto

auto是margin的可選值之一。相信大家平時使用auto值時,最多的用法大概是 margin: 0 auto; 和 margin: auto;,恩,是的,塊元素水平居中。讓我們來看看代碼實現(xiàn):

CSS:

#demo{
    width: 500px;
    margin: auto; /* 或者 margin: 0 auto; */
}

HTML:

<div id="demo">
    <p>恩,我就是那個需要水平居中的家伙。</p>
</div>

為了更明顯點,我們來看個例子:margin實現(xiàn)塊元素水平居中。Cool,這么簡單就實現(xiàn)了水平居中。

不過你可能也發(fā)現(xiàn)了不論是 margin: auto; 還是 margin: 0 auto; 效果都是一樣的,都是讓 #demo 水平居中了,但縱向并沒有任何變化。

大家都知道 margin 是復合屬性,也就是說 margin: auto; 其實相當于 margin: auto auto auto auto;,margin: 0 auto;相當于 margin: 0 auto 0 auto;,四個值分別對應上右下左。至于CSS中的上、右、下、左順序就不做贅述了。

根據(jù)規(guī)范,margin-top: auto;margin-bottom: auto;,其計算值為0。這也就解釋了為什么 margin: auto; 等同于 margin: 0 auto;。但僅此而已嗎?讓我們來看看規(guī)范描述:

原文:On the A edge and C edge, the used value of ‘a(chǎn)uto’ is 0.

翻譯:如果場景是A和C,那么其 auto 計算值為 0。

更詳細請參閱:margin properties

由此可見,它們還與書寫模式 writing-mode 和 文檔流方向 direction 有關。所以我們說 margin: auto; 等同于 margin: 0 auto; 是不太精準的,因為還有前置條件。
了解這些很重要,這有助于理解 margin 屬性的設計意圖。
OK,聊了這么多,我們回到默認的 writing-mode: horizontal-tb;direction: ltr; 的情況繼續(xù)往下,后面的話題都基于這個前提。

為什么auto能實現(xiàn)水平居中?

這是因為水平方向的 auto,其計算值取決于可用空間(剩余空間)。

原文:On the B edge and D edge, the used value depends on the available space.
翻譯:如果場景是B和D,那么其 auto 計算值取決于可用空間。

想象這樣一個場景,一個寬100px的p被包含在一個寬500px的div內(nèi),此時設置 p 的 margin-left 值為 auto,大家覺得結果會怎樣?

CSS:

#demo{
    width: 500px;
}
#demo p{
    width: 100px;
    margin-left: auto;
}

HTML:

<div id="demo">
    <p>恩,我就是那個p。</p>
</div>

結果你猜到了嗎?沒猜到也不怕,用事實說話:margin-left關鍵字auto結果猜想。

好了,結果得到了,p相對于包含塊右對齊了,這與規(guī)范描述一致。margin-left:auto; 自動占據(jù)了包含塊的可用空間,即 500 - 100px = 400px。也就是說auto最后的計算值為400px,即 margin-left:400px;。所以 margin-right:auto; 的結果會相當于左對齊。
到這里,相信大家都知道為什么 margin: auto;margin: 0 auto; 能實現(xiàn)水平居中了。因為左右方向的auto值均分了可用空間,使得塊元素得以在包含塊內(nèi)居中顯示。
至于垂直方向上為什么無法居中,還有更深層的原因嗎?大家可以思考一下。

可參考:

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號