css盒模型

1. css盒模型分为标准模型和IE模型
2. 标准模型计算高度仅计算content的高度,IE模型会计算padding,border,content
3. 浏览器默认的是box-sizing: content-box，即标准模型
4. box-sizing: border-box 指的是IE模型
5. js获取盒模型对应的宽和高兼容性最好的方式是:

window.getComputedStyle(dom).width/height
dom.getBoundingClientRect.width/height

6. BFC

基本概念： 块级格式化上下文
> 原理和渲染规则：
>1. 在BFC这个元素的垂直方向的边距会发生重叠
>2. BFC的区域不会与浮动元素的box重叠---这个是用来清除浮动和布局的
>3.BFC在页面上是一个独立的容器,外面的容器不会影响里面的容器,反之一样
>4.计算BFC高度的时候浮动元素也会参与计算
>
>如何创建BFC:
>1.只要设置浮动,当前元素就创建了BFC
>2.position值为absolute或者fixed
>3.display属性值为table相关的的
>4.设置overflow
>
BFC的使用场景: 当发生编剧重叠的时候,将该元素添加父级元素,并给父级元素创建BFC