深入理解CSS盒模型

一、什么是CSS盒模型？

盒模型是初学CSS必须要掌握的一个点，涉及到页面的整体布局。常说的CSS盒模型分为W3C标准盒模型和IE盒模型。下面上一张图直观的看二者区别：

标准盒模型和IE盒模型

很明显IE盒模型的width和height包含了padding和border，而标准盒模型没有包含。
那么二者怎么转化呢？
box-sizing: content-box: 指的是W3C标准盒模型，也是默认的设置属性。
box-sizing: border-box：指的是IE盒模型，width和height包含了padding和border。

二、JS如何获取盒模型对应的宽和高？

dom.style.width/height：对节点样式可读可写，但只能读或写内嵌的CSS样式对于在<style>或外联样式不能读写。
dom.currentStyle.width/height：拿到的是渲染之后的宽和高，比较真实，但支持IE浏览器
window.getComputedStyle(dom).width/height：方法是只读的，只能获取样式，不能设置。
dom.getBoundingClientRect().width/height：getBoundingClientRect()方法得到8个值，除了 width 和 height 外的属性x、y、left、top、right和bottom都是相对于视口(viewport)的左上角位置而言的。如下：

<style media="screen">
    #box {
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>


  <div id="box"></div>

  <script>
    var box = document.getElementById('box');
    console.log(box.getBoundingClientRect());
// x: 8, y: 8, width: 100, height: 100, top: 8, left 8, bottom: 108, right: 108
  </script>

三、BFC

1、什么是BFC？

BFC(Block Formatting Context)：块级格式化上下文。是一种边距重叠解决方案。

2、BFC的原理

(1) 在BFC元素的垂直方向的边距会发生重叠。
(2) BFC的区域不会与浮动元素Box重叠。
(3) BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反之，里面的元素也不会影响外面的元素。(张鑫旭在他的博客中称BFC是CSS世界的结界，就是这个意思。)
(4) 计算BFC高度的时候，浮动元素也会参与计算。

3、如何创建BFC？

(1) <html> 根元素
(1) float值不为none，即只要设置了float值就创建了一个BFC。
(2) position的值只要不是static或relative，就创建了一个BFC。
(3) display值为inline-block或table-cell或table-caption等，就创建了一个BFC。
(4) overflow值不为visible，即为auto或者hidden时，就创建了一个BFC。

4、BFC的使用场景

(1) BFC垂直方向边距重叠问题

<style>
        #margin {
            background: #1890FF;
            overflow: hidden;
        }
        #margin p {
            margin: 15px auto 25px;
            background: yellowgreen;
        }
    </style>

    <section id="margin">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </section>

边距重叠

1，2，3，4的上边距应该都是15px，下边距都是25px，很明显，1和2，2和3，3和4之间的边距发生了重叠，重叠的原则就是取较大值，即1和2之间的距离是25px。

给某个子元素添加一个父元素，然后给这个父元素添加一个BFC，可以解决该子元素的边距重叠问题，如下，给2添加一个父级div，然后给定样式overflow: hidden。

<style>
        #margin {
            background: #1890FF;
            overflow: hidden;
        }
        #margin p {
            margin: 15px auto 25px;
            background: yellowgreen;
        }
    </style>

    <section id="margin">
        <p>1</p>
        <div style="overflow: hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <p>4</p>
    </section>

消除边距重叠

1和2，2和3之间就没有边距重叠现象了，边距都变成15+25=40px了，而不是之前取较大值的25px。

(2) BFC不与float重叠

<style>
        #layout {
            background: blue;
        }
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }

        .right {
            height: 150px;
            background: yellowgreen;
        }
    </style>

    <section id="layout">
        <div class="left">1</div>
        <div class="right">2</div>
    </section>

与float元素重叠

图中可以看到1与2因为高度不同，发生了部分重叠，背景蓝色完全被遮挡。

可以给右侧div设定overflow: hidden;来创建一个BFC元素，消除重叠，如下：

<style>
        #layout {
            background: blue;
        }
        .left {
            float: left;
            width: 100px;
            height: 100px;
            background: pink;
        }

        .right {
            height: 150px;
            background: yellowgreen;
            overflow: hidden;
        }
    </style>

    <section id="layout">
        <div class="left">1</div>
        <div class="right">2</div>
    </section>

BFC不与float重叠

1和2的重叠消除了，背景蓝色显示出来。

(3) BFC子元素即使是float元素，也会参与高度计算

<style>
        #float {
            background: blue;
        }
        .float {
            float: left;
            color: yellowgreen;
        }
</style>

    <section id="float">
        <div class="float">这是一个浮动元素</div>
    </section>

子元素为浮动元素,不参与父元素高度计算

子元素为浮动元素时候，父级元素颜色未显示，高度为0，子元素不参与父级元素高度的计算。

当把父级元素设为BFC时候，子元素也会参与到父级元素的高的计算中来，如下：

<style>
        #float {
            background: blue;
            overflow: hidden; 
        }
        .float {
            float: left;
            font-size: 35px;
            color:yellowgreen;
        }
    </style>

    <section id="float">
        <div class="float">这是一个浮动元素</div>
    </section>

BFC子元素即使是float元素，也会参与高度计算

给父级元素添加overflow: hidden;或float: left创建一个BFC之后，父级元素背景颜色出现，且子元素的高度参与了父级元素高度的计算。