css 盒模型

概念

IE模型

寬度是計算padding和border的

標準模型

寬度指的是content的寬度

css如何設置這兩種模型呢

標準模型

box-sizing:content-box

IE模型

box-sizing:border-box

js如何設置獲取盒模型對應的寬和高

1. dom.style.width/height(只能獲取內聯樣式的寬和高)
2. dom.currentStyle.width/height(只能用於IE)
3. window.getComputedStyle(dom).width/height
4. dom.getBoundingClientRect().width/height

BFC (塊級格式化上下文)

BFC原理（BFC渲染規則）

• BFC元素的垂直方向的邊距會發生重疊
• BFC區域不會與浮動元素的box重疊
• BFC在頁面中是一個獨立的容器，外面的元素不會影響它裏面的元素，反過來，裏面的元素也不會影響外面的元素
• 計算BFC高度的時候，浮動元素也會參與計算

如何建立BFC

• float值不爲none
• position的值不是static或者relative
• overflow的值不爲」visible」(如：overflow:hidden)
• display的值爲 「table-cell」, 「table-caption」, or 「inline-block」中的任何一個