本文已参与「新人创作礼」活动，一起开启掘金创作之路
前言
在面试和复习过程中总结的一些前端知识点，记录下来，风格较简洁，尽量涵盖内容要点和简单例子。本文是前端面试系列第三篇：CSS 相关要点，持续更新...
一、介绍下盒子模型
盒子模型从内到外包含：内容区域、内间距区域、边框区域、外边距区域。
box-sizing 属性决定了盒子的 width、height 涉及的范围：
box-sizing: content-box代表 width、height 是内容区域的box-sizing: border-box代表 width、height 是边框区域的
二、css 选择器的优先级
- 第一优先级：
!important会覆盖页面内任何位置的元素样式 - 内联样式，如
style="color: green"，权值为1000 - ID选择器，如
#app，权值为0100 - 类、伪类、属性选择器，如
.foo,:first-child,div[class="foo"]，权值为0010 - 标签、伪元素选择器，如
div::first-line，权值为0001 - 通配符、子类选择器、兄弟选择器，如
*,>,+，权值为0000 - 继承的样式没有权值
三、什么是 BFC，有什么作用，如何形成 BFC
BFC 全称：Block Formatting Context， 名为 "块级格式化上下文"。
BFC 是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
列举几个触发 BFC 的 CSS 属性：
- overflow: hidden
- display: inline-block
- position: absolute
- position: fixed
- display: table-cell
- display: flex
四、position 有哪些值，作用分别是什么
static（静态定位） 对象遵循标准文档流，top, right, bottom, left 等属性失效。relative（相对定位） 对象遵循标准文档流，top, right, bottom, left 等属性相对于该对象在标准文档流中的位置进行偏移。absolute（绝对定位） 对象脱离标准文档流，使用 top, right, bottom, left 等属性进行绝对定位，相对于 static 以外的第一个父元素进行绝对定位。fixed（固定定位） 对象脱离标准文档流，使用 top, right, bottom, left 等属性进行绝对定位，相对于浏览器窗口进行绝对定位。sticky（粘性定位）一开始为 static，在一定的滚动高度时变成 fixed，常用于固定菜单。
五、flex 布局的好处
按行或者按列形成弹性布局，自适应，在内部触发 BFC，浏览器都支持。
六、双飞翼/圣杯布局是什么
圣杯布局也叫双飞翼布局，本质上是三栏布局，两边宽度固定，中间宽度自适应。
七、css3 有哪些新特性
transform、transition、animation
八、css 样式隔离手段
- BEM：在命名上用前缀分开，优点是简单，缺点是容易出错；
- css module：将 css 文件模块化，优点是简单易用，缺点是依赖 css-loader；
- 使用 less 等预处理器，优点是可嵌套、可读性高，缺点是需要借助编译工具；
- vue 的
<style>标签有个 scoped 属性。
九、层叠上下文是什么
层叠上下文是 html 元素的一个三维概念，一般当一个元素的 position 不是 static，并且设置了 z-index 后，它的层级会比其他元素高。
十、浮动元素会造成什么影响，如何清除浮动
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。浮动会导致父元素高度坍塌。
清除浮动：在浮动元素下面添加空元素：
```
<div style="clear:both; height:0;"></div>
```
十一、让一个 div 上下居中对齐
body { display: flex; }
div { margin: auto; }
