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>