題目：談談你對css盒模型的認識？

答:

基本概念：padding,margin,border,content

• 標準盒模型

• IE怪異盒模型

  
  
  TIM圖片20171009112830.png

標準盒模型和IE模型的區別

計算寬度和高度不用

• 標準模型的寬度是：content的寬度，不包含padding和border；
• IE模型寬和高是計算 border 和 padding 的。

css如何設置這兩種模型

box-sizing:content-box;/標準模型（瀏覽器默認）/
box-sizing:border-box;/IE模型/

JS如何讓設置獲取盒模型對應的寬高

• dom.style.width/height//取出內聯的寬高，不準確
• dom.currentStyle.width/height//拿到的是瀏覽器渲染后的寬高，準確，只有IE支持
• window.getComputedStyle(dom).width/height//兼容firefox.chrome,通用性更好
• dom.getBoundingClientRect().width/height//渲染后拿到，適用于計算一個元素的絕對位置，這個絕對位置是根據視窗viewpoint左上角左頂點拿到4個width/height/left/top

實例題（根據盒模型對應的寬高解釋邊距重疊）

子元素高100px，子元素與父元素上邊距10px，求父元素高度

答：如果給父元素加overflow:hidden（相當于給父元素創建BFC），父元素高110px，否則父元素高100px。

BFC

• BFC基本概念
  Block formatting context 塊級格式化上下文,一個獨立的渲染區域。
  FC（formatting context 格式化上下文），是頁面的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局以及其它元素之間的關系和作用。
  常見的FC有BFC,IFC（行級格式化上下文）,GFC（網格布局格式化上下文），FFC（自適應格式化上下文）。

• BFC布局規則（渲染規則、原理）
  1.內部的box會在垂直方向一個接一個的放置。
  2.box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊
  3.每個元素的margin box的左邊與包含塊border box 的左邊相接觸
  4.BFC的區域不會與浮動元素的box重疊（用來清除浮動）
  5.BFC是頁面上的獨立容器，外面的元素不會影響里面的元素，里面的元素也不會影響外面的元素
  6.計算BFC高度時，浮動元素也會參與計算

• 如何創建BFC
  1.float不為none,css默認為none，只要設置了浮動，當前的元素就創建了BFC
  2.position的值不是static和relative,默認值是static
  3.display:inline-block/table-cell/table-caption/table/flex/inline-flex等
  4.overflow不為visible，auto,hidden
  5.根元素，即html元素

• BFC作用
  1.自適應兩欄布局
  2.阻止元素被u浮動元素覆蓋
  3.可以包含浮動元素，清除內部浮動
  4.分屬于不同的BFC時，可以阻止margin重疊

• 解決BFC垂直方向邊距重疊

  • BFC垂直方向邊距重疊
    子元素邊距重疊，2的下邊距3的上邊距發生重疊，取最大值25
    取消重疊，為其加個父元素，并給父元素創建BFC

  <section id="margin">
  <style type="text/css">
    #margin{
        background: pink;
        overflow: hidden;/*創建BFC*/
    }
    #margin p{
        margin:5px auto 25px;
        background: gray;
    }
  </style>
    <p>1</p>
    <!-- <p>2</p> -->
    <div style="overflow: hidden;"><p>2</p></div>
    <p>3</p>
  </section>
  

• BFC的區域不會與浮動的box重疊

  <section id="layout">
  <style type="text/css">
    #layout{
        background: #ccc;
    }
    #layout .left{
        width: 100px;
        height: 100px;
        background: red;
        float: left;
    }
    #layout .right{
        height: 110px;
        background: yellow;
        overflow: auto;/*為右側創建BFC就不會與浮動元素重合*/
  
    }
  </style>
    <div class="left"></div>
    <div class="right">wwwwwwwwwww</div>
  </section>
  

• 清除浮動

  • 清除浮動原理：觸發父div的BFC屬性，使下面的子div都處在父div的同一個BFC區域之內，此時已成功清除浮動。
    BFC子元素即使是float，也會參與高度計算
    當把外層的父元素設置成BFC時，子元素的浮動元素也會參與父級元素的高度計算上來

    <style type="text/css">
    #float{
        background: red;
        overflow: auto;/*為父元素創建BFC，那么父元素就有了高度*/
        /*float: left;為父元素創建BFC，那么父元素就有了高度*/
    }
    #float .left{
        float: left;
        font-size: 30px;
    }
    </style>
    <section id="float">
    <div class="left">
        清除浮動原理
    </div>      
    </section>