盒模型

什麼是盒模型

每個HTML元素都可以叫做盒模型，盒模型由外而內包括：邊距（margin）、邊框（border）、填充（padding）、內容（content）。它在頁面中所佔的實際寬度是margin + border + paddint + content 的寬度相加。

設定

box-sizing:content-box(W3C)/border-box(IE)

標準盒模型和IE的盒模型不同

標準盒模型的內容大小就是content的大小，而IE的則是content + padding +border 總的大小。

獲取和設定box的寬高

JavaScript獲取元素尺寸和大小操作總結

window.getComputedStyle(dom).width/height獲取元素的寬高。這個方法相容性較好，支援firefox、chrome。

dom.currentStyle.width/height來獲取，獲取到的是元素渲染之後的寬高，是準確的，但是隻限於IE使用。

邊距重疊

兩個box如果都設定了邊距，那麼在垂直方向上，兩個box的邊距會發生重疊，以絕對值大的那個為最終結果顯示在頁面上。

父子關係的邊距重疊

父子關係，如果子元素設定了外邊距，在沒有把父元素變成BFC的情況下，父元素也會產生外邊距，給父元素新增 overflow：hidden 這樣父元素就變為 BFC，不會隨子元素產生外邊距，但是父元素的高會變化。

同級關係的重疊

同級元素在垂直方向上外邊距會出現重疊情況，最後外邊距的大小取兩者絕對值大的那個

BFC

BFC就是“塊級格式化上下文”的意思，也有譯作“塊級格式化範圍”。它是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關係和相互作用。通俗的講，就是一個特殊的塊，內部有自己的佈局方式，不受外邊元素的影響。

BFC原理

• BFC內部的盒子，會在垂直方向，一個接一個地放置。垂直方向上也會發生邊距重疊。
  BFC就是頁面上的一個獨立容器，容器裡面的子元素不會影響到外面的元素，外邊的也不會影響裡邊* 的。
• BFC的區域不會與float box重疊。
• 計算BFC的高度時，浮動元素也被計算在內。

BFC如何產生

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
  在屬性值為這些的情況下，都會讓所屬的box產生BFC。

使用場景

自適應佈局

<!-- BFC不與float重疊 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的這一個原理就可以實現兩欄佈局，左邊定寬，右邊自適應。不會相互影響，哪怕高度不相等。 -->
    </section>

清除浮動

<!-- BFC子元素即使是float也會參與計算 -->
        <section id="float">
            <style media="screen">
              #float{
                background: #434343;
                overflow: auto;
              }
              #float .float{
                float: left;
                font-size: 30px;
              }
            </style>
            <div class="float">我是浮動元素</div>
        </section>

解決垂直邊距重疊

 <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin>p{
                margin: 5px auto 25px;
                background: red;
            }
            #margin>div>p {
                margin: 5px auto 20px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <!-- 這樣就會出現第一個p標籤的margin-bottom不會和第二個p標籤的margin-top重疊，這也是BFC元素的另一個原則，不會影響到外邊的box，是一個獨立的區域。 -->
    </section>