---恢復內容開始---

盒模型：

1、基本內容：

2、基本概念：標準模型＋IE模型

3、標準模型和IE模型的區別：

4、css如何設置這兩種模型：

5、js如何設置獲取盒模型對應的寬和高

6、根據盒模型解釋邊距重疊

7、BFC（邊距重疊解決方案）

基本內容：

content+padding+border+margin

基本概念:

標準模型:css設置的width是指content的width，比如width：100px,指的是內容100px ,實際的width ＝ content＋padding＋margin+border

IE模型:ss設置的width是指content+border+padding的width,比如width：100px，指的是content+padding+border=100px

標準模型和IE模型的區別:

這兩者計算的width 和height不一樣

標準模型 width ＝ content

IE模型 width ＝ content＋padding＋border

css如何設置這兩種模型

box-sizing:content-box | border-box 默認的是content-box（標準模型）

js如何設置獲取盒模型對應的寬和高

（1）dom.style.width--只能獲取到內聯樣式的width

（2）dom.currentStyle.width --拿到的是渲染以後的dom的width（只有IE支持）

（3）window.getComputedStyle(dom).width

（4）dom.getBoundingClientRect().width --計算元素的絕對位置的時候常用

根據盒模型解釋邊距重疊

比如div1和div2，div1的margin-bottom = 30px, div2的margin-top = 5px,div1和div2之間的距離是30px,這就是邊距重疊 ， 會取兩者之間的最大值作為邊距

BFC（邊距重疊解決方案）

（1）、BFC的基本概念：塊級格式化上下文

（2）、BFC的原理

＊：外面元素和裏面的元素互不幹擾

＊：float元素不會與BFC元素相互重疊

＊：BFC垂直方向上的元素邊距重疊

＊：BFC如果裏面的子元素是浮動的，則計算父元素的高度的時候，會把浮動元素的高度計算進去（清除浮動原理）

（3）、如何創建BFC

　　　　(1)根元素

　　　　(2)float的值不為none

　　　　(3)overflow的值不為visible

　　　　(4)display的值為inline-block,table-cell,table-caption

　　　　(5)position的值為absolute或fixed

（4）、BFC使用場景

BFC邊距重疊解決邊距重疊的問題原理

設置div2的樣式overflow：hidden這樣div2就變成了一個BFC，因為BFC是一個獨立的區域，外面的元素和裏面的元素互不幹擾，所以不會發生邊距重疊

BFC應用到兩欄布局

<section id="main">
    <style>
        #main .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .right{
            height: 200px;
            background-color: blue;
            /*overflow: hidden;*/
        }
    </style>
    <div class="left">left</div>
    <div class="right">right</div>
</section>

當將.right設置overflow：hidden,將right設置為BFC,根據原理BFC不會與float發生重疊，則左邊和右邊不會發生了重疊

---恢復內容結束---

css－－盒模型