css盒模型總結

css盒模型

css盒模型由margin、border、padding、content組成。

• css盒模型分爲IE盒模型和標準盒模型。之間的卻別在與對於寬高的計算不同
  IE盒模型認爲content包括border,padding,width/height
  標準盒模型認爲content只包含width/height

改變盒模型的方法

• 標準盒模型: box-sizing:content-box
• ie盒模型: box-sizing:border-box

js獲取樣式的方法

• dom.style.width ⇒ 這種方法只能獲取內聯樣式，無法獲取外部引入的樣式。
• window.getComputedStyle(box).width ==> 獲取到的是計算後的屬性。但是此方法是ie的專有屬性，存在兼容性的問題
• dom.getBoundClientRect().width ==> 獲取到元素的絕對位置，也可以獲取到元素的寬和高

邊距重疊

BFC（快捷格式上下文）