CSS盒模型完整介紹

盒模型的認識

1. 基本概念：標準模型+IE模型。 包括margin,border,padding,content
2. 標準模型和IE模型的區別
3. css如何設置獲取這兩種模型的寬和高
4. js如何設置獲取盒模型對應的寬和高
5. 根據盒模型解釋邊距重疊
6. BFC（邊距重疊解決方案，還有IFC）解決邊距重疊

1、基本概念：標準模型+IE模型

什麼是盒模型：盒模型又稱框模型（Box Model）,包含了元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素。如圖：

因爲IE盒模型的怪異模式，IE模型和標準模型的內容計算方式不一樣。

2、標準模型和IE模型的區別

IE模型和標準模型惟一的區別是內容計算方式的不一樣，以下圖所示：

IE模型元素寬度width=content+padding，高度計算相同

標準模型元素寬度width=content，高度計算相同

3、css如何設置獲取這兩種模型的寬和高

經過css3新增的屬性 box-sizing: content-box | border-box分別設置盒模型爲標準模型（content-box）和IE模型（border-box）。

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box設置爲標準模型，它的元素寬度width=100px。

---

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box設置爲IE模型，它的元素寬度width=content + 2 padding + 2 border = 70px + 2 10px + 2 5px = 100px。

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

1. dom.style.width/height 只能取到行內樣式的寬和高，style標籤中和link外鏈的樣式取不到。
2. dom.currentStyle.width/height 取到的是最終渲染後的寬和高，只有IE支持此屬性。
3. window.getComputedStyle(dom).width/height 同（2）可是多瀏覽器支持，IE9以上支持。
4. dom.getBoundingClientRect().width/height 也是獲得渲染後的寬和高，大多瀏覽器支持。IE9以上支持，除此外還能夠取到相對於視窗的上下左右的距離

以上API在瀏覽器中測試過，有興趣能夠都試一下

5、外邊距重疊

當兩個垂直外邊距相遇時，他們將造成一個外邊距，合併後的外邊距高度等於兩個發生合併的外邊距的高度中的較大者。注意：只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併，行內框、浮動框或絕對定位之間的外邊距不會合並。

且看下面例子：

<section id="sec">
        <style media="screen">
            * {
                margin: 0;
                padding: 0;
            }
            #sec {
                background: #f00;
            }
            .child {
                height: 100px;
                margin-top: 10px;
                background: yellow;
            }
        </style>
        <article class="child"></article>
    </section>

這裏父元素section的高度是多少呢，100px，可是咱們給section設置overflow:hidden後高度就變成110px，這是爲何呢，其實這裏咱們給父元素建立了BFC。，什麼是BFC,請看下面的介紹。

六 、BFC

BFC(Block Formatting Context)：塊級格式化上下文。
BFC決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當設計到可視化佈局的時候，BFC提供了一個環境，HTML元素在這個環境中按照必定的規則進行佈局。一個環境中的元素不會影響到其餘環境中的佈局。

BFC的原理（渲染規則）

1. BFC元素垂直方向的邊距會發生重疊。屬於不一樣BFC外邊距不會發生重疊
2. BFC的區域不會與浮動元素的佈局重疊。
3. BFC元素是一個獨立的容器，外面的元素不會影響裏面的元素。裏面的元素也不會影響外面的元素。
4. 計算BFC高度的時候，浮動元素也會參與計算(清除浮動)

如何建立BFC

1. overflow不爲visible;
2. float的值不爲none；
3. position的值不爲static或relative；
4. display屬性爲inline-blocks,table,table-cell,table-caption,flex,inline-flex;

說了這麼多規則，放幾個實類出來看看。

<section id="margin">
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            #margin {
                background: pink;
                overflow: hidden;
            }
            p {
                margin: 15px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <p>4</p>
    </section>

請看這裏的第二個p元素<p>2</p>他被一個父元素包裹，而且父元素有 overflow:hidden 樣式，前面的如何建立BFC的第一條就說了 overflow:hidden 能夠建立一個BFC。結果以下圖所示。

咱們看這裏的2，它的上下外邊距都沒有與1和3發生重疊，但3與4外邊距發生了重疊。這就解釋了BFC建立了一個獨立的環境，這個環境中的元素不會影響到其餘環境中的佈局，因此BFC內的外邊距不與外部的外邊距發生重疊。

---

再看看下面的列子：

<section id="layout">
        <style media="screen">
            #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>

效果以下：

寫過前端頁面的咱們確定遇到過這種狀況，這裏實際上是浮動元素疊在 .right 元素的上面，若是咱們想讓.right元素不會延伸到 float元素怎麼辦,其實咱們在.right元素上加 overflow:hidden （用其餘的方式建立BFC也能夠）建立BFC就能夠解決。由於BFC不會與浮動元素髮生重疊。

---

還有一種狀況很常見，就是因爲子元素浮動，致使父元素的高度不會把浮動元素算在內，那麼咱們在父元素建立BFC就可讓可讓浮動元素也參與高度計算。

IFC這裏就不介紹，你們能夠自行搜索。