4

1-如何设置一个元素垂直居中？

①、通过verticle-align:middle实现CSS垂直居中。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-blo

②、通过display:flex实现CSS垂直居中。

随着越来越多浏览器兼容CSS中的flexbox特性，所以现在通过“display:flex”实现CSS水平居中的方案也越来越受青睐。

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column

③、通过伪元素:before实现CSS垂直居中。

具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

④、通过display:table-cell实现CSS垂直居中。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

⑤、通过隐藏节点实现CSS垂直居中。

创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。

这种方法也适用于CSS水平居中，原理一样。

⑥、已知父元素高度通过transform实现CSS垂直居中。

给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

⑦、通过line-height实现CSS垂直居中。

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

2-图片懒加载的实现？

首先编写判断图片是否出现在视野当中，如果出现就加载传入图片。

接下来就是判断是否在滑轮将要滑到的范围和浏览器高度内，如果在这范围内就加载传入图片。

最主要的是把程序语言当中的图片标签的src属性全部使用data-xx代替，这样就可以图片属性被代替。

然后当鼠标滑动到图片即将出现在可视区域时，将即将出现的图片的data-xx的属性值赋给src，然后就是加载图片的程序。

后的时候要用js代码代入这个函数，这样就可以实现网页图片的懒加载了

3-简述媒体查询的作用

针对不同屏幕尺寸设置不同的样式

4-css3 新增了哪些特性

1、CSS3选择器

2、CSS3边框(Borders)

3、CSS3背景

4、CSS3渐变

5、CSS3文本效果

6、CSS3字体

7、CSS3转换和变形

1）2D转换方法

2）3D转换属性

8、CSS3过度

9、CSS3动画

10、CSS3多列

11、CSS3盒模型

12、CSS3伸缩布局盒模型(弹性盒子)

13、CSS3多媒体查询

5-display:none 和 visibility:hidden 的区别

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。 

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

6-less 的作用？Scss（sass），stylus 的作用？

sass(scss) 、less、 stylus等都是css预处理器

sass：是一种动态样式语言，比css多出了很多功能（如变量，计算，混入，颜色处理，函数，继承， 嵌套等），更易阅读，扩展名.sass

　　　需要严格的遵循缩进的语法规则，不带{}和分号；

　　　　h1

　　　　　　color:red;

scss：是sass语法进行改良后的语法，兼容原来的语法，只是将原来的缩进排版方式改成了我们熟悉的{}，扩展名 .scss

　　　　h1{

　　　　　　color:red

　　　　}

less：Less也是一种动态语言，受sass影响很大，对css赋予了动态语言的特性，如变量，计算，继承，函数等。Less既可以在客户端运行（支持IE6+），也可以在服务端运行（借助nodejs）

　　h1{

　　　　color:red

　　}

stylus：主要是给node项目进行css预处理支持，人气不如前两个。扩展名是.styl

　　　　同时支持缩进和css常规书写方式，如下两种方式都是可以的

　　　　h1

　　　　　　color:red

　　　　h1{

　　　　　　color:red

　　　　}