• 基本概念： 標準模型 + IE 模型
• 基本模型和 IE 模型的區(qū)別：計算寬度和高度的不同
• CSS 如何設置這兩種模型（由理論轉(zhuǎn)為運用）
• JS 如何設置、獲取盒模型對應的寬和高
• 實例題（根據(jù)盒模型解釋邊距重疊問題） 拔高性的延伸

• BFC （邊距重疊解決方案）面試?？迹踩菀谆煜念}目

  
  
  標準模型.png
  
  
  IE模型.png

CSS 如何設置這兩種模型

標準模型：box-sizing: content-box;
IE 模型：box-sizing: border-box;

JS 如何設置盒模型對應的寬和高

• dom.style.width/height : 只能取出內(nèi)聯(lián)樣式的寬和高 eg: <div id="aa" style="width: 200px"></div>
• dom.currentStyle.width/height 獲取即時計算的樣式，但是只有 IE 支持，要想支持其他瀏覽器，可以通過下面的方式
• window.getComputedStyle(dom).width: 兼容性更好
• dom.getBoundingClientRect().width/height: 這個較少用，主要是要來計算在頁面中的絕對位置

邊距重疊

什么是邊距重疊呢?

邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補白、邊框)重合在一起而形成一個單一邊界。

父子元素的邊界重疊

<style>
  .parent {
    background: #e7a1c5;
  }
  .parent .child {
    background: #c8cdf5;
    height: 100px;
    margin-top: 10px;
  }
</style>
<section class="parent">
  <article class="child"></article>
</section>

在這里父元素的高度不是 110px，而是 100px，在這里發(fā)生了高度坍塌。
原因是如果塊元素的 margin-top 與它的第一個子元素的 margin-top 之間沒有 border、padding、inline content、 clearance 來分隔，或者塊元素的 margin-bottom 與它的最后一個子元素的 margin-bottom 之間沒有 border、padding、inline content、height、min-height、 max-height 分隔，那么外邊距會塌陷。子元素多余的外邊距會被父元素的外邊距截斷。

兄弟元素的邊界重疊

<style>
  #margin {
    background: #e7a1c5;
    overflow: hidden;
    width: 300px;
  }
  #margin > p {
    background: #c8cdf5;
    margin: 20px auto 30px;
  }
</style>
<section id="margin">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</section>

可以看到 1 和 2,2 和 3 之間的間距不是 50px，發(fā)生了邊距重疊是取了它們之間的最大值 30px。

空元素的邊界重疊

假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并

BFC

解決上述問題的其中一個辦法就是創(chuàng)建 BFC。BFC 的全稱為 Block Formatting Context，即塊級格式化上下文。

• 處于同一個 BFC 中的元素相互影響，可能會發(fā)生 margin collapse；
• BFC 在頁面上是一個獨立的容器，容器里面的子元素不會影響到外面的元素，反之亦然；
• 計算 BFC 的高度時，考慮 BFC 所包含的所有元素，包括浮動元素也參與計算；
• 浮動盒的區(qū)域不會疊加到 BFC 上；

防止垂直 margin 重疊

父子元素的邊界重疊得解決方案： 在父元素上加上 overflow:hidden;使其成為 BFC。

.parent {
  background: #e7a1c5;
  overflow: hidden;
}

兄弟元素的邊界重疊，在第二個子元素創(chuàng)建一個 BFC 上下文：

<section id="margin">
    <p>1</p>
    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>

清除內(nèi)部浮動

  #float {
    background: #fec68b;
  }
  #float .float {
    float: left;
  }
</style>
<section id="float">
  <div class="float">我是浮動元素</div>
</section>

父元素#float 的高度為 0，解決方案為為父元素#float 創(chuàng)建 BFC，這樣浮動子元素的高度也會參與到父元素的高度計算：

#float {
  background: #fec68b;
  overflow: hidden; /*這里也可以用float:left*/
}

自適應兩欄布局

<section id="layout">
  <style>
    #layout {
      background: red;
    }
    #layout .left {
      float: left;
      width: 100px;
      height: 100px;
      background: pink;
    }
    #layout .right {
      height: 110px;
      background: #ccc;
    }
  </style>
  <!--左邊寬度固定，右邊自適應-->
  <div class="left">左</div>
  <div class="right">右</div>
</section>

在這里設置右邊的高度高于左邊，可以看到右邊超出的部分跑到左邊去了，這是由于由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣導致的。

解決方案為給右側(cè)元素創(chuàng)建一個 BFC，原理是 BFC 不會與 float 元素發(fā)生重疊。

#layout .right {
  height: 110px;
  background: #ccc;
  overflow: auto;
}