经验之谈：
- 前端面试很多都是问JS，基本不问HTML和CSS
- 十题中，CSS的题最多两道
题一：BFC是什么？
概念题，答题思路还是「是什么、怎么做、解决了什么问题、优点是、缺点是、怎么解决缺点」
-
是什么：避免回答，直接把 BFC 翻译成中文「块级格式化上下文」即可，千万别解释。
-
怎么做：背诵 BFC 触发条件，虽然 MDN 的这篇文章 列举了所有触发条件，但本押题告诉你只用背这几个就行了
- 浮动元素（元素的 float 不是 none）
- 绝对定位元素（元素的 position 为 absolute 或 fixed）
- 行内块 inline block 元素
- overflow 值不为 visible 的块元素
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
-
解决了什么问题：
- 清除浮动（为什么不用 .clearfix 呢？）
- 防止 margin 合并
- 某些古老的布局方式会用到（已过时）
题二：如何实现垂直居中？
这道题相当经典。
实践题。建议写博客理清思路，然后面试的时候把博客的链接发出去。
参考方方的答案。七种方式实现垂直居中 · 语雀 (yuque.com)
题三：CSS选择器优先级如何确定？
实践题，建议写博客总结，面试甩链接，这样就不用自己背了。
这里有 CSS 2.1 规格文档的权威算法：（但并不适用于 CSS 3）
如果记不住，可以记下这三句话：
- 选择器越具体，其优先级越高
- 相同优先级，出现在后面的，覆盖前面的
- 属性后面加 !important 的优先级最高，但是要少用
题四：如何清除浮动？
实践题，建议写博客，甩链接。
方法一，给父元素加上 .clearfix
.clearfix:after{
content: '';
display: block; /*或者 table*/
clear: both;
}
.clearfix{
zoom: 1; /* IE 兼容*/
}
方法二，给父元素加上 overflow:hidden。
这种题目已经过时了，只存在于面试中，因为做布局用flex，有什么浮动？因为IE不支持flex，才高出浮动这么个东西。
题五：两种盒模型的区别？
区分题，答题思路为：先说一，再说二，再说相同点，最后说不同点。
第一种盒模型是 content-box，即 width 指定的是 content 区域宽度，而不是实际宽度，公式为
实际宽度 = width + padding + border
第二种盒模型是 border-box，即 width 指定的是左右边框外侧的距离，公式为
实际宽度 = width
相同点是都是用来指定宽度的，不同点是 border-box 更好用。
有意思的是，ie最先用的就是border-box，而不是难用的content-box
