【知識梳理】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>