6. BFC规范是什么？
BFC规定了内部的Block Box如何布局
内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含块border box的左边相接触。
BFC的区域不会与float box重叠。
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC的高度时，浮动元素也会参与计算（这一点挑出来问的）
是不是感觉还是挺费脑子的，休息一分钟，继续往下看
7. 怎么让Chrome支持小于12px 的文字？
- 我们都知道，谷歌浏览器最小文字是 12px的，那么如何让它更小一点呢？
- 这里就要用到 transform 中的缩放（scale）
p{ font-size: 12px; transform: scale(0.8); /* 兼容谷歌的写法 */ -webkit-transform: scale(0.8); }
8. css 加载会造成阻塞吗？
解析：
- 解此题，首先得知道浏览器解析过程
由上图我们可知：
DOM 和 CSSOM 通常是并行构建的,所以 CSS 加载不会阻塞 DOM 的解析
然而，由于 Render Tree 是依赖于 DOM Tree 和 CSSOM Tree 的,
所以他必须等待到 CSSOM Tree 构建完成。
也就是 CSS 资源加载完成(或者 CSS 资源加载失败)后,才能开始渲染。因此，CSS 加载会阻塞 Dom 的渲染
如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行），样式表会在后面的 js 执行前先加载执行完毕，所以css 会阻塞后面 js 的执行
9. 1像素边框问题如何解决？
这个问题有多种解决方案，例举几种：
媒体查询利用设备像素比缩放，设置小数像素
.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } }
缺点： 小数像素目前兼容性较差
- box-shadow 方案
div { -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5); }
缺点： 颜色不好控制，也容易存在兼容问题
- transform: scale(0.5) 推荐使用，此为最佳方案
div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden; }
10. CSS优化、提高性能的方法有哪些？
此为开放性问题，以下答到几条即可：
语义化，什么场景用什么样的标签最好（这条必答）
避免过度约束
避免后代选择符
避免链式选择符
使用紧凑的语法
避免不必要的命名空间
避免不必要的重复
避免！important（除非迫不得已）
尽可能的精简规则（可以合并不同类里的重复规则）
