详解CSS盒模型

一、盒模型的类型

     分为两种，标准盒模型和IE盒模型。

二、上述两种盒模型的区别

     计算宽高的方式不同。

     标准盒模型宽高是content的宽高

     IE盒模型宽高包含了content、padding和border。

三、如何转换这两种盒模型

     就是将标准盒模型变为IE盒模型。或者换过来

     使用box-sizing属性：content-box为标准盒模型。border-box为IE盒模型。

四，如何在JS中获取任意一个DOM的宽高

     1.Element.style.width/height   该方法只能获取内联样式设置的宽高。

     2.window.getComputedStyle(dom).width/height  该方法兼容IE和现代浏览器

     3.dom.getBoundingClientRect().width/height/left/top 

      该方法会返回四个值，left和top是相对于视窗的偏移距离。

      区别于offsetTop和left，offset方法是相对于父级元素有设置定位属性的偏移距离，如果都没有，就相对body元素。

五、什么是BFC

    概念,BFC是块格式化上下文，是Web页面中盒模型布局的CSS渲染模式。

    1.什么时候CSS会创建一个BFC呢？

     浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。换句话说，只要一个元素满足以下任意一种情况，就会新建一个BFC。

    *float不为none。

    *overflow不为visible。

    *position不为relative或static

    *display的值为inline-block，table-cell，table-caption，flex或inline-flex

2.BFC有什么作用呢？

   I，属于同一个BFC的毗邻块元素，垂直外边距会发生折叠。新的外边距取最大值。

   II，如果不想外边距发生折叠，可以创建一个新的BFC来避免。

   III，使用BFC来包含浮动元素。且还有一个作用，会使浮动的元素回归常规的文档流。

   IV，解决文字的环绕问题

   V.在局部中使用BFC