题目：谈谈你对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>