盒模型简单理解

盒模型：由内而外，由context+padding+border+margin组成的模型

分类：

1.标准盒模型

 

2.IE盒模型

 

区别：

IE盒模型的宽度由context+padding+border组成。

标准盒模型的宽度为context宽度。

css设置：

标准：box-sizing:context-box;

IE:box-sizing:border-box;

 

获取盒模型宽度：

1.dom.style.height/width:只适用于内联样式，嵌入样式以及外联样式获取不到。

2.dom.currentStyle.height/width:只适用于IE。

3.window.getComputeStyle(dom).height/width:兼容各个浏览器。

4.dom.getBonudingClientRect.width/height:通过相对页面的绝对位置获取宽高。

5.dom.offsetWidth/offsetHeight:通常使用，适用性好。

 

BFC(块级格式化上下文)：

创建bfc：

1.float属性不为none。

2.position为absolute/fixed。

3.display为inline-block,table-cell,table-caption,flex,inine-flex。

4.overflow不为visible。

5.根元素。