CSS-盒子模型

前言：

---

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

盒模型的认识：

• 基本概念：标准模型+IE模型。 包括margin,border,padding,content
• 标准模型和IE模型的区别
• css如何设置获取这两种模型的宽和高
• js如何设置获取盒模型对应的宽和高
• 根据盒模型解释边距重叠
• BFC（边距重叠解决方案，还有IFC）解决边距重叠

基本概念：标准模型+IE模型：

---

每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

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

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

---

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

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

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

css如何设置获取这两种模型的宽和高：

---

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

.content-box {
  box-sizing:content-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.content-box设置为标准模型，它的元素宽度width=100px。

.border-box {
  box-sizing: border-box;
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

.border-box设置为IE模型，它的元素宽度width=content + 2 * padding + 2 * border = 70px + 2 *10px + 2 * 5px = 100px。

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

---

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

外边距重叠：

---

当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。

BFC：

---

BFC(Block Formatting Context)：块级格式化上下文。
BFC决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当设计到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。

BFC的原理（渲染规则）：

• 根元素或其它包含它的元素
• overflow不为visible;
• 浮动元素（float的值不为none）；
• 绝对定位元素 （position的值不为static或relative）；
• 内联块（元素具有 display: inline-block）；
• 表格单元格（元素具有 display: table，table-cell，HTML表格单元格默认属性）；
• 表格标题 （元素具有 display: table-caption, HTML表格标题默认属性）；
• display: flex，inline-flex;
• display: flow-root；
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

 <section id="layout">
        <style media="screen">
            #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>

这样发现浮动元素叠在 .right 元素的上面，这样的话我们可以通过在.right元素上加 overflow:hidden （用其他的方式创建BFC也可以）创建BFC就可以解决。

#layout .right {
     height: 110px;
     background: #ccc;
     overflow:hidden;
     //	float: left
 }

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

参考：
CSS 基础框盒模型介绍