面试题之CSS盒模型

1、基本概念

基本概念：标准模型 + ie模型

（1）标准模型 （宽、高）= content 的宽高

（2）ie模型（宽、高）= content 的宽高 + padding 的宽高 + border 的宽高

2、CSS如何设置这两种模型

标准模型 box-sizing: content-box;
ie 模型 box-sizing: border-box;
浏览器默认是标准盒模型。

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

1、内联样式的宽和高：dom.style.width/height
2、渲染后的结果，只有ie支持 : dom.currentStyle.width/height
3、所有浏览器支持，和第二个原理一样，通用性更好些： window.getComputedStyle(dom).width/height
4、计算一个元素的决定位置（根据视窗-左顶点）：dom.getBoundingClientRect().width/height

4、解决盒模型边距重叠—BFC

（1）BFC的基本概念

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level box可以参与创建BFC， 它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

（2）创建BFC的方式

1.float 除了none以外的值
2.overflow 除了visible 以外的值（hidden，auto，scroll ）
3. display (table-cell，table-caption，inline-block, flex, inline-flex)
4. position值为（absolute，fixed）
5. fieldset元素
在以上的情况里可以创建BFC。

（3）BFC的使用场景

1.解决margin叠加问题
2.用于清除浮动，计算BFC高度.