題目：談?wù)勀銓?duì)css盒模型的認(rèn)識(shí)？

答:

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

• 標(biāo)準(zhǔn)盒模型

• IE怪異盒模型

  
  
  TIM圖片20171009112830.png

標(biāo)準(zhǔn)盒模型和IE模型的區(qū)別

計(jì)算寬度和高度不用

• 標(biāo)準(zhǔn)模型的寬度是：content的寬度，不包含padding和border；
• IE模型寬和高是計(jì)算 border 和 padding 的。

css如何設(shè)置這兩種模型

box-sizing:content-box;/標(biāo)準(zhǔn)模型（瀏覽器默認(rèn)）/
box-sizing:border-box;/IE模型/

JS如何讓設(shè)置獲取盒模型對(duì)應(yīng)的寬高

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

實(shí)例題（根據(jù)盒模型對(duì)應(yīng)的寬高解釋邊距重疊）

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

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

BFC

• BFC基本概念
  Block formatting context 塊級(jí)格式化上下文,一個(gè)獨(dú)立的渲染區(qū)域。
  FC（formatting context 格式化上下文），是頁面的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局以及其它元素之間的關(guān)系和作用。
  常見的FC有BFC,IFC（行級(jí)格式化上下文）,GFC（網(wǎng)格布局格式化上下文），F(xiàn)FC（自適應(yīng)格式化上下文）。

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

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

• BFC作用
  1.自適應(yīng)兩欄布局
  2.阻止元素被u浮動(dòng)元素覆蓋
  3.可以包含浮動(dòng)元素，清除內(nèi)部浮動(dòng)
  4.分屬于不同的BFC時(shí)，可以阻止margin重疊

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

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

  <section id="margin">
  <style type="text/css">
    #margin{
        background: pink;
        overflow: hidden;/*創(chuàng)建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的區(qū)域不會(huì)與浮動(dòng)的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;/*為右側(cè)創(chuàng)建BFC就不會(huì)與浮動(dòng)元素重合*/
  
    }
  </style>
    <div class="left"></div>
    <div class="right">wwwwwwwwwww</div>
  </section>
  

• 清除浮動(dòng)

  • 清除浮動(dòng)原理：觸發(fā)父div的BFC屬性，使下面的子div都處在父div的同一個(gè)BFC區(qū)域之內(nèi)，此時(shí)已成功清除浮動(dòng)。
    BFC子元素即使是float，也會(huì)參與高度計(jì)算
    當(dāng)把外層的父元素設(shè)置成BFC時(shí)，子元素的浮動(dòng)元素也會(huì)參與父級(jí)元素的高度計(jì)算上來

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