css－－盒模型

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

盒模型：

一、基本內容：

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

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

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

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

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

七、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發生重疊，則左邊和右邊不會發生了重疊

 

 

 

 

 

 

 

 

 

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