CSS盒模型深刻

CSS盒模型

標準模型IE模型

標準模型width表示content的寬度，IE模型width表示border+padding+content的寬度。

設置這兩種模型可以使用：

box-sizing: content-box;   /*瀏覽器默認*/
box-sizing: border-box;

獲取寬高

dom.style.width/height

只有經過內聯樣式設置的寬高才能獲取到，用<link>標籤引入的css獲取不到。

dom.currentStyle.width/height  //IE
window.computedStyle(dom).width/height  //標準

不管樣式是什麼類型，均可以獲取到寬高，且是渲染後的實際寬高。

dom.getBoundingClientRect().width/height

獲取元素的寬高，和相對於視口的lfet top。

邊距重疊

子元素的外邊距會反應在父元素上，相鄰元素外邊距會取較大值，空元素上下外邊距會取較大值。

BFC

BFC指塊級格式化上下文，是一個有特別規則的區域，規定內部元素如何佈局，與外部元素無關。

1.BFC有一下幾個規則：

• 內部上下相鄰元素外邊距會重疊。
• BFC塊不會與浮動元素重疊。
• 內部浮動元素也參與BFC高度的計算。

2.BFC的觸發：

• float屬性不爲none；
• position: absolute/fixed；
• overflow: auto/hidden；
• display: inline-block、table-cells、table-captions、或inline-flex

BFC應用

1.解決邊距重疊問題

<style>
    div { overflow: auto; }
    p { margin: 5px auto 10px; }
</style>
<div>
    <p></p>
</div>

使 div觸發 BFC，內部元素外邊距不會反映到父級元素上。

<style>
    .wrap { overflow: auto; }
    p { margin: 5px auto 10px; }
    .bfc { overflow: auto; }
</style>
<div class='wrap'>
    <p></p>
    <div class='bfc'>
        <p></p>
    </div>
</div>

兩個 <p>標籤都有上下外邊距，給 <p>標籤加父級，且觸發 BFC，外邊距不會在重疊。

2.清除浮動

<style>
    div { overflow: auto; }
    p { float: left; }
</style>
<div>
    <p></p>
</div>

使 div觸發 BFC，內部浮動元素元素也參與高度計算。