盒式模型
CSS 盒子模型分为两类：W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)
他们都包括，content(内容区域）、padding区域、border区域、margin区域
他俩的不同之处在于对宽高的定义不同。
W3C盒子模型的 width = content.width ， height = content.height
IE盒子模型的 width = content.width + padding * 2 + border * 2
可以通过定义 box-sizing 的值，来定义某个区域元素的盒子模型。
W3C盒子模型 box-sizing: content-box;
IE盒子模型 box-sizing: border-box;
下面通过一个实例来了解他们之间的差异：
首先在 style 中定义：
.content-box {
box-sizing: content-box;
margin: 10px;
padding: 10px;
border: 1px solid black;
width: 100px;
}
.border-box {
box-sizing: border-box;
margin: 10px;
padding: 10px;
border: 1px solid red;
width: 100px;
}
在页面的 html 中绘制两个 div
<!-- width = content -->
<div class="content-box" id="c1">
Hello World!
</div>
<!-- width = border + padding + content -->
<div class="border-box" id="c2">
Hello World!
</div>
比较他们之间结果的差异性：
明明定义了同样的 width、pading、margin和border 他们最后展现的结果却不同。
现在来计算一下他们各自真实的 content 宽度和总宽度到底为多少（这里暂时不考虑margin)
上面的 div 是 W3C 标准模型，content 宽度就是定义的宽度 width = 100px
总宽度 = width + padding * 2 + border * 2 = 100px + 20px + 2px = 122px
下面的 div 是 IE 盒子模型，content 宽度 = width - padding2 - border2 = 100px -20px -2px = 77px
总宽度 = width(content + padding2 + border 2) = 100px
由于模型的不同，这里就差了 22px 的宽度
获取元素 CSS 属性
dom.style.attr 可以获取元素的行内样式的属性值
windows.getComputedStyle(dom).attr 可以获取元素计算后样式的属性值
IE下
dom.currentStyle[attr]
clientWidth、scrollHeight、offsetWidth
- offset 系列
offsetWidth = width + 左右padding + 左右boder
offsetTop: 当前元素上边框到最近的已定位父级（offsetParent） 上边框的距离。如果父
级都没有定位，则是到body 顶部的距离 - client 系列
clientWidth = width + 左右padding
clientTop = boder.top(上边框的宽度) -
scroll 系列
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
scrollTop :内容层顶部到可视区域顶部的距离
image.png
js实例（与上一节代码关联）：
let c1 = document.getElementById('c1')
let c2 = document.getElementById('c2')
console.log(c1.clientWidth, c1.offsetWidth) // 120 122
console.log(c2.clientWidth, c2.offsetWidth) // 98 100
BFC
参考：https://zhuanlan.zhihu.com/p/25321647
BFC(Block formatting context)直译为"块级格式化上下文"，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
BFC 的三个作用：
1）防止外边距重叠 （让两个元素不要处于同一个BFC下，给其中一个元素创建一个独立的BFC即可防止外边距重叠）
2）清除浮动影响 （让包含浮动元素的div 创建 BFC，让浮动元素参与计算宽高）
3）防止文字环绕
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
内容被浮动元素覆盖，但是文字在浮动元素周围环绕，给第二个 div 创建 BFC。
即加入 overflow: hidden 属性后，效果如下
如何创建 BFC(触发 BFC):
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
