1 CSS盒模型的基本概念
CSS盒模型包括内容（content）、内边距（padding）、边框（border）、外边距（margin）属性的一个盒子模型。
2 盒模型如何分类、有什么区别、如何设置
①
盒子模型分为2种标准：标准模型、IE模型。
②
标准模型的宽高指content的宽高；
IE模型的宽高指content+padding+border的长度。
③
标准模型 “box-sizing: content-box;”（浏览器默认为标准模型）
IE模型 “box-sizing: border-box;”
3 JS 如何设置获取盒模型的宽高
| 方法 | 区别 |
|---|---|
| dom.style.width/height | 只能取内联样式 |
| dom.currentStyle.width/height | 取渲染后的样式，但只支持 IE 浏览器 |
| window.getComputedStyle().width/height | 可知更多浏览器（Firefox、Chrome等），兼容性好 |
| dom.getBoundingClientRect().width/height | ①获取元素相对于视窗的位置的集合 ②返回值有 top、left、width、height ③兼容性更好，可以兼容IE5、firefox2以上的浏览器 |
4 BFC
4.1 BFC 基本概念
（block format context）块级格式化上下文。
它是一个独立的渲染区，只有block-level box参与，它规定了内部的block-level box布局，并且与这个区域外部毫不相干。
4.2 BFC 布局规则（渲染规则）
①内部的box会在垂直方向，一个接一个的放置；
②box垂直方向的距离由margin决定，属于同一个BFC的两个相连box的margin会重叠；
③BFC是一个隔离的独立容器，容器内的子元素不会影响容器外面的元素；反之亦然；
④计算BFC高度时，浮动元素也会参与计算；
⑤BFC的区域不会与float box重叠；
4.3 BFC 如何创建
①float 不为 none（可为left、right…）;
②overflow 不为 visible （可为hidden、auto…）;
③positon 为 absolute、fixed;
④display 为 inline-block、flex、table、table-cell…；
4.4 BFC 的使用场景
①避免margin重叠；
②避免塌陷（清除浮动）；
③自适应两栏布局；