简述什么是BFC？
1. 基本概念：（Block Formatting Context）
块级格式化上下文，它是一个独立的布局环境，其中的元素布局不会影响到外界元素；
2. 解决什么问题？
- 外边距重叠问题；（例如给一个元素添加 overflow:hidden)
- 浮动元素引起的父元素高度塌陷问题（也就是清除浮动）；
- 两栏自适应布局；
3. 满足以下条件，就可以创建BFC:
- 浮动元素：float的值不是none；
- 绝对定位元素：position 为 absolute 或 fixed；
- 内联块：元素display属性为inline-block、table-cell；
- overflow：值为auto 、scroll和hidden；
px、rem、em的区别
px ：相对于显示器屏幕分辨率，值是固定的，指定多少就是多少，无法用浏览器字体放大功能；
em ：值相对于父元素字体大小： em = 像素值 / 父级font-size；
rem：rem的原理就是等比缩放，相对于根元素font-size计算值的倍数；
计算方式：设备宽度 * 100 / 设计稿宽度
注：一般rem是被问到最多的
谈一下盒模型
1. 盒模型的组成： 由里向外是：content、padding、border、margin；
2. 标准盒模型：
- width 指【content】部分的宽度； box-sizing: content-box；
3. IE盒模型：
- width 表示【content+padding+border】这3个部分的宽度; box-sizing: border-box；
css3有哪些新特性
1. 圆角（border-radius）
2. 文字阴影 （text-shadow）
3. 文字渲染（text-decoration）
4. 线性渐变（gradient）
5. 转换transform（旋转/rotate、倾斜/skew、位移/translate、缩放/scale）
6. 多列布局（column属性)
7. 弹性盒模型
8. 媒体查询
link 与 @import 的区别?
1. link属于html标签，而@import是css中提供的；
2. 在页面加载的时候，link会同时被加载；@import引用的css会在页面加载完成后才加载；
3. @import只有在IE5以上才能被识别，而link是html标签，不存在浏览器兼容问题；
4. link引入样式的权重大于@import的引用；
什么是外边距重叠？ 重叠的结果是什么？
1. 相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。
这种合并外边距的方式被称为折叠，结合而成的外边距称为折叠外边距
2. 折叠结果遵循下列计算规则：
2.1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
2.2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
2.3. 两个外边距一正一负时，折叠结果是两者的相加的和
flex：0 1 auto 是什么意思
1. flex是 【flex-grow】【flex-shrink】【flex-basis】3个 属性的缩写；
2. flex-grow:
定义项目放大比例；
默认为0，表示如果存在剩余空间，也不放大，都为1时表示平均分配剩余空间；
3. flex-shrink:
定义项目缩小比例;
默认值为1，即如果空间不足，该项目将等比缩小;
4. flex-basis:
用于设置项目占据的主轴空间;
设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值
解释什么是浮动以及工作原理
1. 概念：
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
2.工作原理：
浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留
3.引起的问题：
父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
4.清除浮动方式：
给父元素设置固定的高度（缺点是只有已知子元素高度才能设置）；
添加额外标签，例如 <div style="clear:both"></div>；
使用 br 标签和其自身的 clear 属性，例如 <br clear="all" />
使用after伪元素（由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout）
如何实现三栏布局？
1. flex布局：中间元素 flex-grow:1；
2. float浮动布局：中间元素的左右margin为左右元素的宽度；
3. absolute绝对布局：同上；
4. table布局：父：display：table，子：display：table-cell;
如何实现元素居中？
1. 弹性盒模型；
2. 绝对定位 + margin:
3. 绝对定位 + 平移：transform：translate（-50%，-50%）;
4. line-height 和 height 保持一致（里面的元素必须是inline，否则不生效）；
5. 通过padding：（已知子元素宽高情况，但不推荐）；
sass常用哪些语法？
比如申明变量、 mixins混合、 条件语句if...else...、 for循环、 extends继承这些
以上问题是自己面试过程中被问到最多次数的，因为我是4年工作经验，所以一般css相关的知识就很少问了，但是一些公司还是会象征性的问一两个。
上述问题都是从各文章总结而来，仅供参考～～～～～～
