盒子模型 #

什么是盒模型 #

又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

由于IE盒模型的怪异模式，IE模型和标准模型的内容计算方式不同。

标准模型和IE模型的区别 #

IE模型和标准模型唯一的区别是内容计算方式的不同。

IE模型元素宽度width=content+padding+border，高度计算相同。

标准模型元素宽度width=content，高度计算相同。

CSS如何设置获取两种模型的宽和高 #

css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）。

当width为100，margin为15，padding为10，border为5时：

• 标准模型元素的content为100
• IE模型元素的content为100-2 padding-2 border = 70

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

• dom.style.width/height只能取到行内样式的宽和高，style标签中和link外联的样式取不到。
• dom.currentStyle.width/height取到的是最后渲染后的宽和高，只有IE支持。
• window.getComputedStyle(dom).width/height同上，多浏览器支持，IE9以上。
• dom.getBoundingClientRect().width/height也是得到渲染后的宽和高，大多浏览器支持，还可以获得相对于视窗的上下左右距离。

外边距重叠 #

当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

BFC #

BFC(Block Formatting Context)：块级格式化上下文。BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

一个环境中的元素不会影响到其他环境中的布局。

BFC的原理（渲染规则）

1. BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠
2. BFC的区域不会与浮动元素的布局重叠。
3. BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。
4. 计算BFC高度的时候，浮动元素也会参与计算(清除浮动)

如何创建BFC

1. overflow不为visible;
2. float的值不为none；
3. position的值不为static或relative；
4. display属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;

场景 #

1. 由于子元素浮动，导致父元素的高度不会把浮动元素算在内，那么我们在父元素创建BFC就可以让可以让浮动元素也参与高度计算。

<style>
     #layout {
        background: red;
        /* 利用BFC，可以撑开父元素的高度 */
        overflow: hidden;
    }
     #layout .left {
        float: left;
        width: 100px;
        height: 100px;
        background: pink;
    }
    #layout .right {
        height: 110px;
        background: #ccc;
        /* 可以避免浮动元素重叠 */
        overflow: hidden;
    }
</style>
<section id="layout">
    <div class="left">1</div>
    <div class="right">2</div>
</section>

1. 其实是浮动元素叠在 .right 元素的上面，如果我们想让.right元素不会延伸到 float元素怎么办,其实我们在.right元素上加 overflow:hidden （用其他的方式创建BFC也可以）创建BFC就可以解决。因为BFC不会与浮动元素发生重叠。