盒模型
定义
CSS基础盒模型是CSS规范的一个模块，当对一个文档进行布局时，浏览器的渲染引擎会根据这个规范将所有元素表示为一个个矩形的盒子。
分类
从标准意义上分为标准盒模型和IE盒模型，从元素类型上分为块级盒子和内联盒子。
盒模型宽高计算:
- 标准：width/height = width/height
- IE： width/height = width/height + padding + border
盒模型切换：
- ie盒模型：box-sizing: border-box
- 标准盒模型： box-sizing: content-box
BFC
定义
块格式化上下文是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
简单来说BFC是一个完全独立的空间，这个空间里子元素的渲染不会影响到外面的布局
创建方式
- display:table-cell
- display: flex
- display: inline-block
- overflow:hidden
- position:absolute
- position:fixed
BFC解决了什么问题
- 垂直方向margin重叠的问题
- 使用Float脱离文档流后，造成的父元素塌陷问题
