知识点：
1、import
import指令是用来导入CSS样式的；Link标签可以导入外部CSS样式，import仍然可以导入外部样式；
import的基本用法：
1）在HTML文件中导入外部样式：
<style>
@import url('./index.css')
</style>要在HTML源代码直接应用@import引入外部CSS文件，须要将@import放入style标签
2）在CSS文件中引入另一个CSS文件
@import url('./index.css')
(后面书写其他样式)3）@import规则还支持媒体查询，因此可以允许依赖媒体的导入
@import "printstyle.css" print;
只在媒体为print时导入“printstyle.css”样式表
@import "mobstyle.css" screen and (max-width:768px)
只在媒体为screen且视口最大宽度768像素时导入“mobstyle.css”样式表import和link的区别：
1）Link属于HTML标签，而@import完全是CSS提供的一种方式；link标签除了可以加载CSS外，还可以做很多其他事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSSl
2)加载顺序的差别：比如，在a.css中使用import引用b.css,只有当使用import命令的宿主css文件a.css被下载、解析之后，浏览器才会知道还有另外一个b.css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作；
3）兼容性差别：由于@import是CSS2.1提出的所以老版本的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
4）当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的；对于可换肤的网站来说，可以通过改变link标签的这两个href值来改变应用不用的外部样式表，但是对于import是无法操作的，毕竟不是标签；
另外，从性能优化的角度来讲，尽量要避免使用@import；使用@import引入CSS会影响浏览器的并行下载，使用@import引用的CSS文件只有在引用它的那个CSS文件被下载、解析之后，浏览器才会知道还有另外一个CSS需要下载，这时才会去下载，然后下载后开始解析，构建render tree;
多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的JS文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。
2、CSS3的calc函数
calc是英文单词calculate(计算)的缩写，是CSS3的一个新增的功能；MDN的解释为可以用在任何长度、数值、时间、角度
频率等处，语法如下：
width:calc(100% - 80px)可以用常见的+-*/符号来进行计算，但是需要注意的是+-必须用空格隔开，原因很简单，如果-号和计算的数字紧挨在一起，则浏览器在解析时会认为这可能是一个负值。
使用计算属性结合绝对定位的垂直居中显示：
父元素：
position:relative;
子元素：
position:absolute;
top:calc(50% - 自身高度的一半)
left:calc(50% - 自身高度的一半)3、CSS3的媒体查询
媒体查询英文全称Media Query，顾名思义就是会查询用户所使用的媒体，在现在，网页的浏览器终端比较多，用户可以通过不同的终端来浏览网页，例如：PC、手机电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让我们的Web页面能适配用户的终端。在CSS3中的Media Query（媒体查询）模块就是用来让一个页面适应不同的终端的。
CSS中所支持的媒体类型：常用的有 all(全部)、screen（屏幕）和print（页面打印或打印预览模式）。
媒体类型引用方法：
1）link方法：link方法引入媒体类型其实就是在link标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型，如下：
<link rel="stylesheet" href="index.css" media="screen and (max-width:600px)"/>
<link rel="stylesheet" href="print.css" media="print"/>2)xml方式：xml方式和link方式比较相似，也是通过media属性来指定，如下：
<? xml-stylesheet rel="stylesheet" media="screen" href="style.css" ?>3)@import:@import引入媒体类型主要有两种方式，一种是在CSS样式表中通过@import调用另一个样式文件，另外一种是在style标签中引入。注意：IE6和IE7不支持该方式。
在样式文件中引入媒体类型：
@import url（'./index.css'） screen在style标签中引入媒体类型：
<style>
@import url('./index.css') screen
</style>4)@media的方式(常用)：@media是CSS3中新引进的一个特性，称为媒体查询。@media引入媒体也有两种方式，如下：
在样式文件中引入媒体类型：
@media screen and (max-width:600px){
具体样式
}在style标签中引入媒体类型：
<style>
@media screen{
具体样式
}
</style>具体的公式：
@media 媒体类型 and (媒体特性){
具体样式
}例如：
@media screen and (min-width:480px) and (max-width:900px){
具体样式
}注意：
1）not关键字：用来排除某种特定的媒体类型和媒体特性
@media not print and (max-width:480px){
具体样式
}样式代码将被用于除了打印设备和屏幕宽度小于或等于480px的所有设备中。
2）未指明Media Type：如果在媒体查询中没有明确的指定Media Type,那么其默认值为all
@media (max-width:900px){
具体样式
}上面的样式适用于屏幕尺寸小于等于900px的所有设备。
4、CSS3的过渡和动画
过渡：指元素的属性变化时的状态
div{
width:100px;
transition:all 1s;
}
div:hover{
width:200px
}上面的示例就是指div中的所有属性在变化时会经过1秒的过渡；
transition是一个复合属性：
transition-property:指定过渡的CSS属性；none:没有属性会获得过渡效果；all:所有属性都将获得过渡效果；property:定义应用过渡效果的CSS属性名称列表，列表以逗号分割。并不是所有的属性都可以过渡，只有属性是具有一个中点值的属性才能够进行过渡效果。
transition-duration：指定过渡所需的完成时间；
transtion-timing-function：指定过渡函数；该属性用于设置过渡的速度；
transition-delay:指定过渡的延迟时间；过渡延迟多久触发，单位为秒或者毫秒，但是值可以是正整数、负整数和0.
如果是多个元素过渡，直接用逗号分开即可：
transition:background-color 2s,height 5s过渡事件
有时候，会等过渡效果结束之后执行某些内容，有对应的transitionend事件，方便我们监听过渡效果是否结束，例如：
<div id="oDiv"></div>
div{
width:100px;
height:100px;
background-color:skyblue;
transition:all 3s
}
var div = document.getElementById("oDiv");
div.onclick = function(){
div.style.height = "400px"
}
div.ontransitionend = function(){
console.log("过渡结束后触发")
}CSS3中的动画：
使用CSS3的animation制作动画包含两个部分：首先是用关键帧声明一个动画，其次是在animation调用关键帧声明的动画。
声明动画的语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname:必需，定义动画的名称；
keyframes-selectior:必需，动画时长的百分比，合法的值：0-100%；
css-styles:必需，一个或多个合法样式。
使用动画：在CSS3中通过animation属性来调用动画
animation:name(要绑定的选择器的关键帧名称) duration（指定多少秒完成） timing-function（如何完成一个周期） delay（设置动画在启动前的延迟间隔） iteration-count(定义动画的播放次数) direction(指定动画是否应该轮流反向播放) fill-mode(规定当动画不播放时，要应用到元素的样式) play-state(指定动画是否正在运行或已暂停)
动画对应事件：
animationstart :css动画开始后触发；
animationiteration:css动画重复播放时触发；
animationend：动画完成后触发
5、渐进增强和优雅降级
渐进增强，英语全称progressive enhancement，指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；
优雅降级，英语全称graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
这两个概念就是“向上兼容”和“向下兼容”。渐进增强相当于向上兼容，优雅降级相当于向下兼容。向下兼容指的是高版本浏览器支持低版本，或者说后期开发的版本能兼容早期开发的版本。
在确定用户群体的前提下，渐进增强：针对低版本浏览器进行页面构建，保证基本功能，再针对高级浏览器进行效果、交互等改进和追加功能，达到更好的用户体验；优雅降级：一开始就构建完整的功能，再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始并试图减少用户体验的供给，而渐进增强则是从一个基础的、能够起到作用的版本开始再不断扩充，以适应未来环境的需要。
例如看下面这两段代码的书写顺序，看上去只是书写顺序的不同，实则表示了我们开发的着重点：
渐进增强写法：
transition{
-webkit-transition:all 5s;
-moz-transition:all 5s;
-o-transition:all 5s;
transition:all 5s;
}
优雅降级写法：
transition{
transition:all 5s;
-o-transition:all 5s;
-moz-transition:all 5s;
-webkit-transition:all 5s;
}前缀CSS3（-webkit-、-moz-、-o-）和正常CSS3在浏览器的支持情况是这样的：
1）很久之前：浏览器前缀CSS3和正常CSS3都不支持；
2）不久之前：浏览器只支持前缀CSS3，不支持正常CSS3；
3）现在：浏览器即支持前缀CSS3，又支持正常CSS3;
4）未来：浏览器不支持前缀CSS3，仅支持正常CSS3。
绝大多数的大公司都是采用渐进增强的方式，因为业务员优先，提升用户体验永远不会排在最前面。
6、CSS变形
CSS3中为我们提供的变形函数：
1）具有X/Y的函数：translateX、translateY、sclaeX、scaleY、skewX、skewY
2)2D变形函数：translate、sclae、rotate、skew、matrix
3)3D变形函数：rotateX、rotateY、rotate3d、translateZ、translate3d、scale3d、scaleZ、matrix3d
CSS3中的变形属性：
1）transform:变形属性;
2）transform-orign：变形的中心点位置;
3）transform-style:是3D空间的一个重要属性，指定了嵌套元素如何在3D空间中呈现；flat：所有的子元素在2D空间呈现；preserve-3d:表示左右子元素在3D空间中呈现。
4）perspective:用于设置查看者的位置，可以将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定该属性，则Z轴空间中所有点将平铺到同一个2D视平面中，并且在变换结果中将不存在景深概念。简单理解就是视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。
5）perspective-orign：查看者的观看位置点
6）backface-visibility属性：决定元素旋转背面是否可见。
2D变形：
位移：transform:translate(-50%,-50%)
缩放：sclae
旋转：rotate
倾斜：skew
3D变形：
位移：translate3d(tx,ty,tz)
旋转：rotate3d(x,y,z,a);x,y,z可以是0-1之间的数值，便是旋转轴方向的矢量；a表示旋转角度，正值表示顺时针旋转，负值表示逆时针旋转；
缩放：scale(sx,sy,sz)
7、渐进式渲染
渐进式渲染，英文全称progressive rendering，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。渐进式渲染指的不是某一项技术，而是各种技术的一种集合。例如：骨架屏、图片懒加载、图片占位符、拆分网页资源
8、CSS渲染性能优化
性能优化的意义：用户角度：网站优化能够让页面加载的更快，响应更加及时，极大提升用户体验；服务商角度：优化会减少页面资源请求数，减少请求资源所占带宽大小，从而节省可观的带宽资源。
优化方式：
1）使用id选择器
2）避免深层次的代码
3）不要使用属性选择器
4）通常将浏览器前缀置于前面，将标准样式属性置于最后（渐进增强）
5）遵守CSSLint规则
6）不要使用@import
7）避免过分重排（Reflow）:重排就是浏览器重新计算布局位置与大小
8）依赖继承
9、层叠上下文
创建层叠上下文的方法有3种：
1）HTML中的根元素HTML本身就具有层叠上下文，称为“根层叠上下文”；
2）普通元素设置position属性为非static值并设置z-index属性为具体数值，会产生层叠上下文；
3）CSS3中的新属性也可以产生层叠上下文
层叠等级和层叠顺序：
两者的意思都是在同一个层叠上下文中，元素在z轴上的显示顺序；只不过前一个是概念，后一个是具体规则。
总结：
1）首先先看要比较的两个元素是否处于同一个层叠上下文中：
如果是，谁的层叠等级大，谁在上面；
如果两个元素不在同一层叠上下文中，请先比较他们所处的层叠上下文的层叠登记。
2）当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。
3）层叠顺序：z-index为正>z-index:auto/0>inline/inline-block水平盒子>float盒子>block盒子>z-index为负>层叠上下文
10、CSS3遮罩
应用：设置倒影
-webkit-box-reflect:below 15px linear-gradient(transparent 10%,blue)第一个值是倒影的位置（上above 下below 左left 右right）；
第二个值是倒影距离；
第三个值是一个遮罩：可以为线性渐变。
面试真题：
1、CSS引用的方式有哪些？link和@import的区别？
CSS引用的方式有：
1）外联，通过link标签外部链接样式表
2）内联，在head标记中使用style标记定义样式
3）嵌入，在元素的开始标记里通过style属性定义样式
link和@import的区别：
1）Link属于HTML标签，而@import完全是CSS提供的一种方式；link标签除了可以加载CSS外，还可以做很多其他事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSSl
2)加载顺序的差别：比如，在a.css中使用import引用b.css,只有当使用import命令的宿主css文件a.css被下载、解析之后，浏览器才会知道还有另外一个b.css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作；
3）兼容性差别：由于@import是CSS2.1提出的所以老版本的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题
4）当使用JS控制DOM去改变样式的时候，只能使用link标签，因为@import不是DOM可以控制的；对于可换肤的网站来说，可以通过改变link标签的这两个href值来改变应用不用的外部样式表，但是对于import是无法操作的，毕竟不是标签。
2、CSS的计算属性知道吗？
即calc（）函数，主要用于指定元素的长度，支持所有CSS长度单位，运算符前后都需要保留一个空格；比如：width：calc(100% - 50px)
3、如何使用媒体查询实现视口宽度大于320px小于640px时div元素宽度变成30%
@media screen and (min-width:320px) and (max-width:640px){
div{
width:30%;
}
}4、CSS3中transtion和animation的属性分别有哪些？
transition过渡动画：
transition-property：指定过渡的CSS属性；
transition-duration:指定过渡所需的完成时间；
transition-timing-function:指定过渡函数；
transition-delay:指定过渡的延迟时间
animation关键帧动画：
animation-name:指定要绑定到选择器的关键帧的名称；
animation-duration：动画指定需要多少秒完成；
animation-timing-function:设置动画将如何完成一个周期；
animation-delay：设置动画在启动前的延迟间隔；
animation-iteration-count:定义动画的播放次数；
animation-direction：指定是否应该轮流反向播放动画；
animation-fill-mode：规定当动画不播放时，要应用到元素的样式；
animation-play-state：指定动画是否正在运行或已暂停
5、CSS动画如何实现？
即animation属性，对元素某个或多个属性的变化进行控制，可以设置多个关键帧。属性包含了动画的名称、完成时间、周期、间隔、播放次数、是否反复播放、不播放时应用的样式、动画暂停或运行。他不需要触发任何事件就可以随着时间变化来改变元素的样式。
使用CSS做动画：
1）@keyframes规定动画；
2）animation所有动画属性的简写属性；
3）animation-name规定@keyframes动画的名称；
4）animation-duration 规定动画完成一个周期所花费的时间秒或毫秒，默认是0；
5）animation-timing-function 规定动画的速度曲线，默认是ease;
6)animation-fill-mode规定当动画不播放时，要应用到元素的样式；
7）animation-delay规定动画何时开始，默认是0；
8）animation-iteration-count规定动画被播放的次数，默认是1；
9）animation-direction规定动画是否在下一周期逆向地播放，默认是normal;
10）animation-play-state规定动画是否正在运行或暂停，默认是running.
6、说说渐进增强和优雅降级？
渐进增强，英语全称progressive enhancement,指的是针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验；
优雅降级，英语全称graceful degradation，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
7、请简述一下CSS3中新增的变形如何使用？
在CSS3中的变形分为2D变形和3D变形；整体可以划分为3大类：
具有X/Y的函数：translateX、translateY、sclaeX、scaleY、skewX、skewY
2D变形函数：translate、sclae、rotate、skew、matrix
3D变形函数：rotateX、rotateY、rotate3d、translateZ、translate3d、scaleZ、scale3d、matrix3d。
8、什么是渐进式渲染？
渐进式渲染，英文名称progressive rendering，也被称之为惰性渲染，指的是为了提高用户感知的加载速度，以尽快的速度来呈现页面的技术。但是这并不是某一项技术的特指，而是一系列技术的集合。例如：骨架屏、图片懒加载、图片占位符、资源拆分。
9、总结一下如何提升或者优化CSS的渲染性能？
CSS渲染性能的优化来自方方面面，这里列举一些常见的方式：
1）使用id选择器非常高效，因为id是唯一的；
2）避免深层次的选择器嵌套；
3）尽量避免使用属性选择器，因为匹配速度慢；
4）使用渐进增强的方案；
5）遵守CSSLint规则；
6）不要使用@import；
7）避免过分重排；
8）依赖继承；
9）值缩写；
10）避免耗性能的属性；
11）背景图优化合并；
12）文件压缩。
10、请简述一下什么是层叠上下文、什么是层叠等级、什么是层叠顺序？
层叠上下文概念：在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到他们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
层叠上下文触发条件：
1）HTML中的根元素HTML本身就具有层叠上下文，称为“根层叠上下文”
2）普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文
3）CSS3中的新属性也可以产生层叠上下文
层叠等级：
如果两个元素在同一个层叠上下文中，那么层叠等级越大的元素，就越靠前。层叠等级是一个概念，层叠等级的大小可以根据层叠顺序来进行判断。
层叠顺序：
层叠顺序表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。说简单一点就是当元素处于同一层叠上下文时如何进行层叠判断：z-index为正>z-index:auto/0>inline/inline-block水平盒子>float盒子>block盒子>z-index为负>层叠上下文。
11、 重绘和重排
当DOM的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘；
当我们对DOM结构的修改引发DOM几何尺寸变化的情况，会发生重拍的过程，例如：一个DOM元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border等；使DOM节点发生减增或移动，读写offset、scroll、client属性的时候，浏览器为了获取这些值，需要进行重排操作，调用window.getComputedStyle方法；
重排过程：依照渲染流水线，触发重排的时候，如果DOM结构发生改变，则重新渲染DOM，然后将渲染过程走一遍。
总结：重绘不一定导致重排，重排一定导致重绘。
12、css3新特性：
border-color:为边框设置多种颜色；
border-radius:圆角边框；
box-shadow:阴影效果；
background-size：指定背景图片尺寸；
text-shadow:文本阴影