1.怪异盒模型和标准盒模型的区别？
答：在标准盒模型中：w3c盒模型，一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
怪异盒模型（IE盒模型，主要表现在IE内核的浏览器）一个块的总宽度 = width + margin(左右)（即width已经包含了padding和border值）
box-sizing ： content-box || border-box || inherit;
- 当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
- 当设置为box-sizing:border-box时，将采用怪异模式解析计算；
- 如何触发 BFC? BFC指的是块级格式化上下文，简单的来说，BFC就是创建一个盒子，盒子内部的元素布局不影响盒子外部的元素。html根元素就是一个BFC;
BFC的触发条件：
- html根元素
- float不为none
- 绝对定位元素 也就是 position 为 absolute 和 fixed
- 行内快元素 display 为 inline-block
- display 为 table-cell inline-block flex inline-flex grid inline-grid table-caption(表格标题)
- overflow 不为 visible 解决margin重叠问题：使其成为BFC 给外层加个overflow:hidden
