盒模型类

• 标准盒模型和IE盒模型，以及区别

• • 　　标准盒模型的width = content
  • 　　IE盒模型的width=content+padding+border
• CSS如何设置这两种模式
  • box-sizing: content-box  标准模型
  • box-sizing: border-box    IE模型
• JS如何设置/获取盒模型对应的宽高？
  • 　　dom.style.width/height 获取内联样式宽高
  •        dom.currentStyle.width/height （只有IE支持）
  •        window.getComputedStyle(dom).width/height(兼容性好)
  •        注意：2、3都是获取浏览器渲染之后的最终宽度
  •       dom.getBoundingClientRect().width/height （得到整个盒子的宽高，并不是content的宽高，）

BFC(边距重叠解决方案)：

1、基本概念：BFC块级格式化上下文   IFC内联格式化上下文

2、原理：

　　BFC垂直方向边距会重叠

　　BFC区域不会与浮动元素box重叠

　　BFC在页面上独立容器，外面不影响里面

　　计算BFC高度，浮动元素也会计算

3、如何创建BFC？

　　1、overflow：除了visible

　　2、float的值不为none

　　3、position的值不为static 或者 relative

　　4、display 与table相关