CSS盒模型深入

zhaoqing發表於2018-04-30
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，內部浮動元素元素也參與高度計算。

相關文章