1. BFC是什么？怎么设置BFC，以及BFC有什么样的应用场景？
参考答案：
BFC指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响。
常见的设置BFC的方式有：
- 设置浮动
- overflow 设置为 auto、scroll、hidden
- positon 设置为 absolute、fixed
常见的应用有：
- 解决浮动元素令父元素高度坍塌的问题
- 解决非浮动元素被浮动元素覆盖问题
- 解决外边距垂直方向重合的问题
2. 怎么让一个 div 水平垂直居中
参考答案：
水平垂直居中主要分为两类：不定宽高和定宽高
定宽高：
- 使用定位+margin
.style { position: absolute; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; width: 500px; height: 500px; background: yellow; z-index: 1; }
- 使用定位 + transfrom
.style { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; background: yellow; z-index: 1; transform: translate3d(-50%,-50%,0); }不定宽高：
使用定位 + transfrom适用
.style { position: absolute; left: 50%; top: 50%; background: yellow; z-index: 1; transform: translate3d(-50%,-50%,0); }
3. flex 布局如何使用？
参考答案：
flex 是"弹性布局"。指定容器
display: flex即可。常用属性有：
flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content。
flex-direction：决定主轴的方向；flex-wrap：如果一条轴线排不下，如何换行；flex-flow：flex-direction属性和flex-wrap属性的简写，默认值为row nowrap；justify-content：项目在主轴上的对齐方式；align-items：项目在交叉轴上的对齐方式；align-content：多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用；子元素的常用属性：
order，flex-grow，flex-shrink，flex-basis，flex，align-self。
order：项目的排列顺序。数值越小，排列越靠前，默认为0；flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis：在分配多余空间之前，项目占据的主轴空间（main size）。flex：是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后面两个属性可选。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
4.隐藏页面中的某个元素的方法有哪些？
参考答案：
常规方法：
display: none;：元素结构消失，会触发回流重绘；opacity: 0;：结构保留，占据空间，可以正常触发事件；visibility: hidden：结构保留，占据空间，仅触发重绘，不会触发事件；逃逸视窗方法：
这种方法并不能让元素消失，只是让元素不在视窗范围内，不被用户看见
- 设置
posoition为absolute或fixed，通过设置top、left等值，将其移出可视区域，超大负边距会将元素抛出视图，因为定位本身脱离了文档流所以不占据空间；.style { position:absolute; left: -99999px; }
- 利用偏移抛出视图，空间会占据，不过元素实际不在视窗内所以无法交互
.style { transform: translate(-9999px); }
5. 回流和重绘是什么？有什么区别？
参考答案：
- 回流: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
- 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变
单单改变元素的外观，不会引起网页重新生成布局，但当浏览器完成回流之后，将会重新绘制受到此次回流影响的部分
回流和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下回流的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
『重绘』不一定会出现『回流』，『回流』必然会出现『重绘』。
6. div 之间的间隙是怎么产生的，应该怎么消除？
参考答案：
原因：浏览器解析的时候，会把回车换行符解析成一定的间隙，间隙的大小跟默认的字体大小设置有关。
解决：其父元素加上 font-size:0 的属性，但是字体需要额外处理。
7. 描述 CSS reset 的作用和用途？
参考答案：
因为不同浏览器间的内核存在差异，对于标记都有自己默认的样式用来保证在没有自定样式的情况下也能被排列、渲染。但各个厂家有自己的风格样式，想要样式不被浏览器默认样式影响，就需要清除默认样式，使各浏览器表现得一致。
8. 如何让浏览器支持小于 12px 的文字？
参考答案：
可以配合 CSS3 中的 transform 属性来实现，例如：
p { font-size: 10px; -webkit-transform: scale(0.8); }
持续更新中....
