CSS盒模型

1. 基本概念
2. 标准模型与IE模型的区别
3. css如何设置这两种模型
4. js如何设置获取盒模型对应的宽和高
5. 根据盒模型解释边距重叠
6. BFC（边距重叠解决方案）
7. 如何创建BFC
8. 应用场景

---

1. 基本概念

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型的组成：（由里向外）content+padding+border+margin
标准模型 + IE模型
· 标准模型：

image.png

·IE模型：

image.png

2. 标准模型与IE模型的区别

· 理论上计算宽高不同

• 标准模型的宽高：内容区域的宽高content，不包含border和padding
• IE模型的宽高：content + border + padding 的总宽高

3. css如何设置这两种模型

标准模型：box-sizing: content-box; (默认方式)
IE模型： box-sizing: border-box;

4. js如何设置获取盒模型对应的宽和高

dom.style.width/height(document.getElementById('dom').style.width)：只能取出内联样式的宽高
dom.currentStyle.width/height： 这种方式获取的是在页面渲染完成后的结果，但是只有 IE 支持
window.getComputedStyle(dom).width/height：兼容性好，都支持
dom.getBoundingClientRect().width/height：根据元素在视窗中的绝对位置来获取宽高
dom.offsetWidth/offsetHeight：兼容性好

5. 根据盒模型解释边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

父子元素的边界重叠

<div class="parent">
  <div class="child"></div>
</div>
<style>
.parent {
    background: #e7a1c5; 
}
.child {
    background: #c8cdf5;
    height: 100px;
    margin-top: 10px;
}
</style>

期待的效果：

父子元素的边界重叠

实际的效果：

父子元素的边界重叠

在这里父元素的高度不是 110px，而是 100px，在这里发生了高度坍塌。

兄弟元素的边界重叠

<div class="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>
<style>
.parent {
  background: #e7a1c5;
  overflow: hidden;
}
.parent > p {
  background: #f0f;
  margin: 20px 0 30px;
}
</style>

期待的效果：

兄弟元素的边界重叠

实际的效果：

兄弟元素的边界重叠

可以看到 1 和 2,2 和 3 之间的间距不是 50px，发生了边距重叠是取了它们之间的最大值 30px。

空元素的边界重叠

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

空元素的边界重叠

6. BFC（边距重叠解决方案）

BFC的基本概念：

BFC的全称为Block Formatting Context，即块级格式化上下文。

BFC原理：

① 内部的box会在垂直方向，一个接一个的放置
② 每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）
③ box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠
④ bfc的区域不会与浮动区域的box重叠
⑤ bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，反过来，里面的也不会影响外面的
⑥ 计算bfc高度的时候，浮动元素也会参与计算

7. 如何创建BFC

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

8. 应用场景

防止垂直margin重叠：

父子元素边界重叠解决方案：

在父元素上加上overflow:hidden;使其成为BFC

.parent {
    background: #e7a1c5;
    overflow: hidden;
}

兄弟元素的边界重叠，在第二个子元素创建一个BFC上下文：

<div class="parent">
  <p>1</p>
  <div style="overflow: hidden">
    <p>2</p>
  </div>
  <p>3</p>
</div>

清除内部浮动

<style>
    #float {
        background: #e7a1c5;
    }
    #float .float {
        float: left;
    }
</style>
<section id="float">
    <div class="float">我是浮动元素</div>
</section>

父元素#float的高度为0，解决方案为为父元素#float创建BFC，这样浮动子元素的高度也会参与到父元素的高度计算：

#float {
    background: #FEC68B;
    overflow: hidden;  /*这里也可以用float:left*/
}

自适应两栏布局

<section id="layout">
  <style>
    #layout {
      background: red;
    }
    #layout .left {
      float: left;
      width: 100px;
      height: 100px;
      background: pink;
    }
    #layout .right {
      height: 110px;
      background: #ccc;
    }
  </style>
  <!--左边宽度固定，右边自适应-->
  <div class="left">左</div>
  <div class="right">右</div>
</section>

在这里设置右边的高度高于左边，可以看到左边超出的部分跑到右边去了，这是由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。

自适应两栏布局

解决方案为给右侧元素创建一个 BFC，原理是 BFC 不会与 float 元素发生重叠。

#layout .right {
  height: 110px;
  background: #ccc;
  overflow: auto;
}

自适应两栏布局

参考：https://segmentfault.com/a/1190000012265930