【知识梳理】3.2CSS盒模型

题目：谈谈你对css盒模型的认识

1.基本概念

标准模型+IE模型，margin、border、padding、content

2.标准模型和IE模型的区别

计算宽度、高度的不同，如何计算？
标准模型的宽度和高度=content的宽度和高度；
IE模型的宽度和高度=content+padding+border的宽度和高度。

3.CSS如何设置这两种模型

使用css3属性box-sizing设置
标准模型box-sizing:content-box；(浏览器默认)
IE模型box-sizing:border-box。

4.JS如何设置、获取盒模型对应的宽和高

dom.style.width/height；只能取出内联样式的宽高。
dom.currentStyle.width/height；浏览器渲染后的宽高，仅IE支持。
window.getComputedStyle(dom).width/height；兼容Firefox，Chrome。
dom.getBoundingClientRect().width/height；计算一个元素的绝对位置，根据视窗viewpoint可获取到width，height，top，left。getBoundingClientRect()

5.实例题

一个题目：块级元素嵌一个子块级元素，子元素的高度为100px,子元素与父元素的上边距是10px,求父元素的高度？答案100px,110px都对。（根据盒模型解释边距重叠，拔高题）

考察点：边距重叠

• 1.父子元素。
• 2.兄弟元素：取margin-top和margin-bottom的最大值作为边距。
• 3.空元素：空元素的margin-top和margin-bottom取一个最大值作为边距。

<section id="sec">
        <style>
            #sec{
                background-color: red;
                overflow: hidden;
                /*不加此句话，父元素高度100px,加上此句话，父元素高度110px*/
            }
            .child{
                height: 100px;
                margin-top: 10px;
                background-color: blue;
            }
        </style>
        <article class="child">overflow: hidden;给父元素sec创建的一个BFC。父元素上不加此句话，父元素高度100px,加上此句话，父元素高度110px</article>
    </section>

6.BFC(边距重叠解决方案)/IFC

BFC基本概念：

• BFC:block formatting context，块级格式化上下文；
• IFC:inline formatting context，内联元素格式化上下文。

BFC的原理（渲染规则）：

• 1.在BFC元素垂直方向的边距会发生重叠；
• 2.BFC的区域不会与浮动元素的box重叠，可用来清除浮动和布局的；
• 3.BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素不会影响外面的元素；
• 4.计算BFC高度的时候，浮动元素也会参加计算。

如何创建BFC？

• 1.float的值不为none；
• 2.position的值不为static或者relative；
• 3.display属性值为inline-block, table-cell, 和 table-caption，table;
• 4.overflow的值不为visiable，即overflow:auto;/overflow:hidden都可创建BFC

BFC的使用场景?

• 1.BFC垂直方向边距重叠

<!-- BFC垂直方向边距重叠 -->
    <section id="margin">
        <style>
            #margin{
                background-color: red;
                overflow: hidden;/*创建BFC*/
            }
            #margin p{
                margin: 5px auto 25px;
                background-color: blue;
            }
        </style>
        <h3 style="background-color: #fff;">BFC垂直方向边距重叠，margin: 5px auto 25px;</h3>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        
        <h3 style="background-color: #fff;">清除重叠，给子元素增加一个父元素f，给他f创建一个BFC</h3>
        <p>1</p>
        <div style="overflow: hidden;background-color: yellow;">
            <p>2</p>
        </div>        
        <p>3</p>
    </section>

• 2.BFC元素不会与浮动元素重叠

<!--BFC不与float重叠（布局时的应用，清除浮动） -->
    <section id="layout">
        <style>
            #layout{
                background-color: red;
            }
            #layout .left{
                float: left;
                width: 100px;
                height: 100px;
                background-color: pink;
            }
            #layout .right{
                height: 110px;
                background-color: blue;
            }
        </style>
        <h3 style="background-color: #fff;">左侧固定宽度，右侧自适应；左浮动，且右侧高度高于左侧</h3>
        <div class="left">float: left;height: 100px;</div>
        <div class="right">height: 110px;</div>
        
        <h3 style="background-color: #fff;">BFC不与float重叠</h3>
        <div class="left">float: left;height: 100px;</div>
        <div class="right" style="overflow: auto;">height: 110px;用overflow: auto;创建BFC，就不会再与左侧部分发生重叠</div>
    </section>

• 3.BFC子元素即使是float也会参与计（正常情况下，子元素是float元素时，不参与计算）

<!-- BFC子元素即使是float也会参与计 -->    
    <h3 style="background-color: #fff;">子元素是float元素时，不参与计算，父元素红色背景不显示</h3>
    <section id="float">
        <style>
            #float{
                background-color: red;
            }
            #float .float{
                float: left;                
            }
            #float:after{
                content: "";
            }
        </style>        
        <div class="float">我是浮动元素,子元素是浮动元素的时候，高度计算没有包含进来，此时父级元素高度为0</div>
    </section>

    <h3 style="background-color: #fff;">BFC子元素即使是float也会参与计算，父元素为BFC，背景为红色</h3>
    <section id="float2">
        <style>
            #float2{
                background-color: red;
                overflow: hidden;/*创建BFC*/
            }
            #float2 .float{
                float: left;                
            }
        </style>        
        <div class="float">我是浮动元素,BFC子元素是浮动元素的时候，参与计算，此时父级元素高度是21px;</div>
    </section>