<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # margin系列之keyword auto > 原作者:doyoe 原文地址:http://blog.doyoe.com/2013/11/29/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bkeyword%20auto/ ## margin的重要性: 有個不容置疑的事,前端開發人員沒有人能夠忽視CSS margin的重要性。CSS coding時,margin的使用頻率就如同呼吸般頻繁,如果我可以說得夸張點的話。 margin作為CSS盒模型基本組成要素之一,是非常Basis的一個技術手段,所以我想對于它的一些基本情況應該不用太介紹了? ## margin經常被用來做什么? - 讓塊元素水平居中; - 讓元素之間留有舒適的留白; - 處理特殊的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;,恩,是的,塊元素水平居中。讓我們來看看代碼實現: ### CSS: ```css #demo{ width: 500px; margin: auto; /* 或者 margin: 0 auto; */ } ``` ### HTML: ```html <div id="demo"> <p>恩,我就是那個需要水平居中的家伙。</p> </div> ``` 為了更明顯點,我們來看個例子:[margin實現塊元素水平居中](http://demo.doyoe.com/css/margin/horizontal-center.htm)。Cool,這么簡單就實現了水平居中。 不過你可能也發現了不論是 `margin: auto;` 還是 `margin: 0 auto;` 效果都是一樣的,都是讓 #demo 水平居中了,但縱向并沒有任何變化。 大家都知道 margin 是復合屬性,也就是說 `margin: auto;` 其實相當于 `margin: auto auto auto auto;`,`margin: 0 auto;`相當于 `margin: 0 auto 0 auto;`,四個值分別對應上右下左。至于CSS中的上、右、下、左順序就不做贅述了。 根據規范,`margin-top: auto;` 和 `margin-bottom: auto;`,其計算值為0。這也就解釋了為什么 `margin: auto; 等同于 margin: 0 auto;`。但僅此而已嗎?讓我們來看看規范描述: > 原文:On the A edge and C edge, the used value of ‘auto’ is 0. >翻譯:如果場景是A和C,那么其 auto 計算值為 0。 ![](http://demo.doyoe.com/css/margin/images/margin.png) 更詳細請參閱:[margin properties](https://drafts.csswg.org/css-box/#the-margin-properties) 由此可見,它們還與書寫模式 ` writing-mode` 和 文檔流方向 `direction` 有關。所以我們說 `margin: auto;` 等同于 `margin: 0 auto;` 是不太精準的,因為還有前置條件。 了解這些很重要,這有助于理解 `margin` 屬性的設計意圖。 OK,聊了這么多,我們回到默認的 `writing-mode: horizontal-tb;` 和 `direction: ltr;` 的情況繼續往下,后面的話題都基于這個前提。 ## 為什么auto能實現水平居中? 這是因為水平方向的 `auto`,其計算值取決于可用空間(剩余空間)。 >原文:On the B edge and D edge, the used value depends on the available space. 翻譯:如果場景是B和D,那么其 `auto` 計算值取決于可用空間。 想象這樣一個場景,一個寬100px的p被包含在一個寬500px的div內,此時設置 p 的 margin-left 值為 auto,大家覺得結果會怎樣? ### CSS: ```css #demo{ width: 500px; } #demo p{ width: 100px; margin-left: auto; } ``` ### HTML: ```html <div id="demo"> <p>恩,我就是那個p。</p> </div> ``` 結果你猜到了嗎?沒猜到也不怕,用事實說話:[margin-left關鍵字auto結果猜想](http://demo.doyoe.com/css/margin/margin-left-auto.htm)。 好了,結果得到了,p相對于包含塊右對齊了,這與規范描述一致。`margin-left:auto;` 自動占據了包含塊的可用空間,即 500 - 100px = 400px。也就是說auto最后的計算值為400px,即 `margin-left:400px;`。所以 `margin-right:auto;` 的結果會相當于左對齊。 到這里,相信大家都知道為什么 `margin: auto;` 和 `margin: 0 auto;` 能實現水平居中了。因為左右方向的auto值均分了可用空間,使得塊元素得以在包含塊內居中顯示。 至于垂直方向上為什么無法居中,還有更深層的原因嗎?大家可以思考一下。 ## 可參考: - [http://www.w3.org/TR/css3-box/#margins](http://www.w3.org/TR/css3-box/#margins) - [http://dev.w3.org/csswg/css-box/#the-margin-properties](http://dev.w3.org/csswg/css-box/#the-margin-properties) - [http://dev.w3.org/csswg/css-box/#Calculating](http://dev.w3.org/csswg/css-box/#Calculating)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看