css盒模型总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/daiwu4044/article/details/81910539

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（快捷格式上下文）