CSS盒模型

CSS盒模型在面试和日常开发的时候都是比较容易遇见的。

CSS盒模型主要有两种：标准盒模型和IE盒模型。

标准盒模型和IE盒模型他们主要的区别在于他们内容宽度问题。而这两种和模型是通过box-sizing来设定的，开发中默认的设定规则是content-box，但这种模式时真的不怎么好用。IE盒模型比较好用，只需将其设定为border-box。

看下标准盒模型：盒子的内容宽度就是设定的width宽度其他都不是，算时额外加的值。

看IE盒模型：由于设定了box-sizing：border-box，所以这里的实际宽度等于设定的width+padding+border值。

盒模型知道了，那js是如何获取他们的宽高呢？往下看

js获取盒模型的宽高有很多种方法，el（元素）

1. 通过el.style.width(height)
2. 通过el.currentStyle.width(height)
3. 通过window.getComputedStyle(el).width(height)
4. 通过el.getBoundingClientRect().width(height)

等等一系列方法。而这些方法也有各自的缺陷。

第一个他只能获取到内联样式的宽和高的、第二个是获取的浏览器渲染后el的宽和高，但这个只能IE浏览器支持，因此有第三个来解决这个其他浏览器不支持第二个的问题，基本上也是通过2和3两联合使用的。

而对于第四个自己也不是很了解，也基本没用过，但它也是可以获取到宽高的。具体可以百度。

对于盒模型它一般还涉及到一个bfc的概念。

bfc：块级格式化上下文，也是清除浮动的原理。

bfc的主要原理和应用场景：也就是渲染规则

1. bfc可以解决边距重叠问题
2. 浮动元素不会与bfc元素发生相互重叠
3. bfc下的浮动元素也会参数高度的计算
4. bfc元素在页面上就是一个独立的容器，里与外的元素不会互相发生影响。

1、bfc可以解决边距重叠问题，基础代码

 .article{
      background-color: red;
   }
  .article p{
     background: gold;
     margin: 5px 0 20px;
   }

　样式表现：

 /* 使其不重叠 */
      .sec{
        overflow: hidden;
      }

　样式表现：可以清除看到样式真正的表现，边距是没有重叠的。

2、浮动元素不会与bfc元素发生相互重叠。

.article-float{
        height: 110px;
        background-color: blue;
      }
      .left{
        float: left;
        width: 100px;
        height: 100px;
        background: gray;
      }
      .right{
        height: 110px;
        background: green;
        overflow: hidden;
      }

　　呈现形式：这里就直接提最终结果了。

3、bfc下的浮动元素也会参数高度计算，这个问题主要在与子元素。若子元素使用浮动，父元素会出现高度塌陷的问题，bfc很好的解决了这个问题。

      #bfc-float-el{
        margin: 10px 0 0 0;
        background-color: blue;
        /* overflow: auto; */
        float: left;
      }
      .float-left{
        float: left;
      }

主要表现：

4、bfc元素在页面上就是一个独立的容器，里面与外面的元素不会互相发生影响。这个就是理解了，

5、bfc是如何创建的呢？比如有float不等于none、overflow等于auto,hiidden、position不等于static和relative等等。

这部分可以看张鑫旭的博客文章，https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/