前端面试-----CSS盒模型

标准模型和IE模型：

box-sizing: content-box  标准模型

box-sizing: border-box  IE模型

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

内敛属性：dom.style.width.height

获取渲染后的属性：dom.currentStyle.width/height(IE支持)

                                window.getComputedStyle(dom).width/height(firefox和chrome)

                                dom.getBoundingClientRect().width/height 根据视窗获取

BFC（边距重叠解决方案）:

BFC的基本概念：块级格式化上下文，他是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

如何创建BFC：1.float值不为none

                       2.根元素

                       3.overflow不为visible

                       4.display的值为inline-block，table-cell，table-caption

                       5.position为absolute或fixed

BFC的作用：清除内部浮动

                    垂直margin合并

                    创建自适应两栏布局