一、基本概念

標(biāo)準(zhǔn)模型 和 IE盒模型

內(nèi)容：border + content+ margin+padding

兩種盒模型的區(qū)別

計(jì)算高度和寬度的方式不同

1.png

標(biāo)準(zhǔn)盒模型的計(jì)算方式 是content 的高度和寬度

1.png

IE盒模型的計(jì)算方式是 content+padding+border

二泪酱、css如何設(shè)置這兩種模型

 box-sizing: border-box; // ```IE```盒模型
  box-sizing: content-box;  //標(biāo)準(zhǔn)盒模型

三、 js如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高

 <div class='content' id='content' style="width: 500px;height: 100px;">我是浮動(dòng)元素</div>
 <script>
        const content = document.getElementById('content');
</script>

1.獲取內(nèi)聯(lián)樣式的寬离赫、高.. (只能獲取內(nèi)聯(lián)樣式）

content.style.width    //500px 
content.style.height  //100px

2.內(nèi)聯(lián)和外聯(lián)樣式都能取到（只支持IE）

content.currentStyle.width / height

3. 所有的都支持

window.getComputedStyle(content).width/height

4. 計(jì)算絕對(duì)位置，能獲取4個(gè)元素值 top right width height

content.getBoundingClientRect().width  /  height  / top  /right

三塌碌、盒模型邊距重疊

對(duì)于行內(nèi)元素 margin-top margin-bottom設(shè)置無(wú)效渊胸，margin-left margin-right有效！ 對(duì)于相鄰的塊級(jí)元素margin-top和margin-bottom兩者疊加按照一定的規(guī)則

（1） 都是整數(shù) margin值取兩者的最大值

（2） 都是負(fù)數(shù) margin值取最小值

（3）兩者正負(fù)相反台妆，margin值取兩者之和

四翎猛、BFC（塊級(jí)格式化上下文）解決邊距重疊問(wèn)題（也可以清除浮動(dòng)）

原理：（渲染規(guī)則）

（1） BFC這個(gè)元素的垂直方向的邊距會(huì)發(fā)生重疊胖翰。
（2）BFC的區(qū)域不會(huì)與浮動(dòng)元素的box重疊
（3）BFC在頁(yè)面是一個(gè)獨(dú)立的容器，內(nèi)外元素互補(bǔ)干涉
（4）計(jì)算BFC高度的時(shí)候浮動(dòng)元素也會(huì)參與計(jì)算

五切厘、怎么創(chuàng)建BFC

根元素：
（1） float屬性不為none

（2） position為 absolute或fixed

（3） display為inline-block table-cell`````` table-caption``````flex`````` inline-flex

（4） overflow不為visible

六萨咳、應(yīng)用場(chǎng)景

1.png

 <section>
        <style>
            #par {
                width: 100px;
                height: 100px;
                overflow: hidden; 
                background-color: red;
                margin: auto;
            }

            #child {
                width: 50px;
                height: 50px;
                margin: 25px;
                background: yellow;
            }
        </style>
        <div id="par">
            <div id="child"></div>
        </div>
    </section>

（2） BFC不與float重疊

1.png

2.png

 <section id="layout">
        <style>
            #layout {
                width: 100%;
                /* background-color: red; */
            }

            #layout .left {
                width: 100px;
                height: 100px;
                background: darkcyan;
                float: left;
            }

            #layout .right {
                overflow: auto;
                height: 130px;
                background-color: darkgoldenrod;
            }
        </style>
        <div class="left">左浮動(dòng)</div>
        <div class="right">右自適應(yīng)</div>
    </section>

（3）BFC子元素即使是浮動(dòng)元素，也不影響父集元素的計(jì)算迂卢。
如果不創(chuàng)建BFC 父級(jí)元素的高為 0

<section id='float'>
        <style>
            #float {
                margin-top: 10px;
                background-color: red;
                overflow: auto;
            }

            .content {
                float: left;
                font-size: 30px;
                width: 500px;
                height: 100px;
            }
        </style>
        <div class='content' id='content' style="width: 500px;height: 100px;">我是浮動(dòng)元素</div>
    </section>