CSS盒模型和BFC块级格式化上下文

1标准模型和IE模型的基本概念和区别

2 CSS如何设置这两种模型

3 JS如何设置获取盒模型对应的宽和高

4 根据盒模型解释边距重叠和解决方案BFC

1 标准模型和IE模型的区别在于内容宽高是否包括padding和border。

标准盒模型：

一个元素的宽度=content

盒子的总宽度=margin+border+padding+width

IE怪异盒模型：

一个元素的宽度=content+padding+border

盒子的总宽度=margin+width

2

3 通过JS获取盒模型对应的宽和高，有以下几种方法：

为了方便书写，用dom来表示获取的HTML的节点。

b.dom.currentStyle.width/height这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设置的样式，都能获取到。但这种方式只有IE浏览器支持。

c.window.getComputedStyle(dom).width/height这种方式的原理和2是一样的，这个可以兼容更多的浏览器，通用性好一些。

d.dom.getBoundingClientRect().width/height这种方式是根据元素在视窗中的绝对位置来获取宽高的。

e.dom.offsetWidth/offsetHeight最常用的，也是兼容最好的。

4 边距重叠规则：一大一小取最大,一正一负取和

以下方式会创建块级格式化上下文：

BFC应用例子：