Css盒模型以及BFC

Css盒模型

css中所有html元素都可以看成爲一個盒子，一個盒模型包括margin、border、padding、content

分類

• 標準模型-width與height按照content寬高計算
  
• IE模型-width與height按照content+padding+border計算
  

兩種模型設置方法（Css3）

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

js獲取寬高

/*標籤屬性中的*/
dom.style.width/height
/*計算後的*/
/*標籤style中(內聯)+內嵌中的+外部的*/
dom.currentStyle.width/height // (僅IE支持)
window.getComputedStyle(dom).width/height(全兼容)
dom.getBoundingClientRect().width/height

---

BFC(塊級格式化上下文)

邊距重疊

父子元素，子元素margin，父元素高度和子元素一樣

Bfc原理(規則)

• 屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• BFC的區域不會與float box重疊
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此
• 計算BFC的高度時，浮動元素也參與計算

創建bfc方法

• body 根元素
• 浮動元素：float 除 none 以外的值
• 絕對定位元素：position (absolute、fixed)
• display 爲 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

bfc的使應用

• 自適應兩欄佈局
• 清除浮動（高度塌陷）
• 防止垂直margin重疊