普通盒模型和怪异盒模型

一、什么是盒模型？

1.根据盒子模型的概念，每个在页面上的元素都是一个拥有宽，高，内边距，边框和外边距的长方形盒子。
2.盒模型分为两种:分别是W3C标准盒模型（普通盒模型）和IE盒模型（怪异盒模型）

二、普通盒模型和怪异盒模型的区别:

1、盒子模型包括margin、padding、content、border，而W3C标准盒子模型的元素宽度width=content的宽度
标准盒模型（W3C盒子模型），设置的width或height是对 实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margin
注：除内容content外，其他为上下左右
2、IE怪异盒子模型的元素宽度width=content+padding+border
怪异盒模型（IE盒子模型），设置的width或height是对 实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin

三、解决两者的兼容问题

可尝试对父元素使用内边距，对子元素使用外边距

四、box-sizing的应用

• box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。（个人认为可以理解为指定盒模型的类型，即上述两种类型）

• box-sizing值为content-box时：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。（即
  标准盒模型）
  box-sizing值为border-box时：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（即
  怪异盒模型） box-sizing值为inherit时：规定应从父元素继承 box-sizing 属性的值。

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

1. 方式一：通过DOM节点的 style 样式获取

         element.style.width/height;

缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式

2. 方式二：（IE独有的）

         element.currentStyle.width/height;

获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。

3. 方式三（通用型）

         window.getComputedStyle(element).width/height;

方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式

BFC

BFC的基本概念:

BFC就是“块级格式化上下文”的意思，也有译作“块级格式化范围”。它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

BFC原理：

1、BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
2、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
3、BFC的区域不会与float box重叠。
4、计算BFC的高度时，浮动元素也被计算在内。
七、BFC如何产生:
在box属性值为这些的情况下，都会让所属的box产生BFC。**

• overflow: auto/ hidden;
• position: absolute/ fixed;
• float: left/ right;
• display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

八、BFC的使用场景

1. 可以用来自适应布局

<!-- BFC不与float重叠 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 -->
    </section>

2. 可以清除浮动：

<!-- BFC子元素即使是float也会参与计算 -->
        <section id="float">
            <style media="screen">
              #float{
                background: #434343;
                overflow: auto;
              }
              #float .float{
                float: left;
                font-size: 30px;
              }
            </style>
            <div class="float">我是浮动元素</div>
        </section>

3. 解决垂直边距重叠：

<section id="margin">
    <style>
        #margin{
            background: pink;
            overflow: hidden;
        }
        #margin>p{
            margin: 5px auto 25px;
            background: red;
        }
        #margin>div>p {
            margin: 5px auto 20px;
            background: red;
        }
    </style>
    <p>1</p>
    <div style="overflow:hidden">
        <p>2</p>
    </div>
    <p>3</p>
    <!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
</section>