js面試題-----CSS盒模型

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

　　　基本概念:標準模型（width只包括content）+IE模型（IE模型的width包括content、padding和border）

　　　CSS如何設置這兩種模型（box-sizing:content-box(標準) box-sizing:border-box(IE)）

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

　　　　　經過dom.style.width/height

　　　　　經過dom.currentStyle.width/height

　　　　   經過getComputedStyle(dom).width/height

　　　　   經過dom.getBoundingClientRect().width/height

　　　實例題（根據盒模型解釋邊距重疊）　　　　　

 <section id='sec'>
        <style>
            #sec{
              background:red;
              overflow:hidden;/*造成BFC*/
            }
            .child{
              height:100px;
              margin-top:10px;
              background:yellow;
            }
        </style>
        <article class='child'></article>
    </section>

　　　BFC（邊距重疊解決方案）：塊級格式化上下文

　　　BFC的原理

　　　　　BFC元素不會與float的元素重疊

　　　　　BFC上下的邊距不會重疊

　　　　　BFC是一個獨立的容器和外面的容器互不干擾

　　　　　計算BFC高度的時候浮動子元素也會參與運算

　　　如何建立BFC:

　　　float的值不等於none；position的值不等於static或者relative；diaplay:table/table-cell;overflow:hidden/auto

　　　BFC的使用場景　

<!--BFC垂直方向邊距重疊-->
    <section id='margin'>
      <style>
        #margin{
          background:pink;
          overflow:hidden;
        }
        #margin>p{
          margin:5px auto 25px;
          background:red;
        }
      </style>
      <p>1</p>
      <div style='overflow:hidden'>
        <p>2</p>
      </div>      
      <p>3</p>
    </section>
    <!--BFC不與float重疊-->
    <section id="layout">
      <style>
        #layout{
          background:red;
        }
        #layout .left{
          float:left;
          width:100px;
          height:100px;
          background:pink;
        }
        #layout .right{
          height:110px;
          background:#ccc;
          overflow:auto;
        }
      </style>
      <div class='left'></div>
      <div class='right'></div>
    </section>
    <!--BFC子元素即便是float也會參與高度計算-->
    <section id="float">
      <style>
        #float{
          background:red;
          float:left;
        }
        .float{
          float:left;
          font-size:30px;
        }
      </style>
      <div class='float'>我是浮動元素</div>
    </section>