1-如何设置一个元素垂直居中？
第一种方法:
div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的左外边距、上外边距为宽高的负1/2-->
margin-left:-100px;
margin-top:-200px;
}
*兼容性好;缺点:必须知道元素的宽高
-------------
第二种方法：
div.box{
weight:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、左都为50%-->
left:50%;
top:50%;
<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
transform:translate(-50%,-50%);
}
*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
---------------
第三种方法
div.box{
width:200px;
height:400px;
<!--把元素变成定位元素-->
position:absolute;
<!--设置元素的定位位置，距离上、下、左、右都为0-->
left:0;
right:0;
top:0;
bottom:0;
<!--设置元素的margin样式值为 auto-->
margin:auto;
}
*兼容性较好，缺点:不支持IE7以下的浏览器
2-图片懒加载的实现？
1、什么是懒加载
将图片src先赋值为一张默认图片，当用户滚动滚动条到可视区域图片的时候，再去加载后续真正的图片
2、为什么要引入懒加载
懒加载（LazyLoad）是前端优化的一种有效方式，可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）
3、加载实现的原理
先将img标签中的src链接设置为空，将真正的图片链接放在自定义属性（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。
4、实现思路
如果滚动的大小和屏幕高度之和大于元素到顶部的距离，设置一个定时器，制造懒加载的延迟加载的效果，也就是说，当我们滑动滚动条，看见图片的时候，就让它加载出来
5、懒加载的实现（jquery）
<img src="/image/8.jpg" data-src="/image/1.png" alt="">
<img src="/image/8.jpg" data-src="/image/2.png" alt="">
<img src="/image/8.jpg" data-src="/image/3.png" alt="">
<img src="/image/8.jpg" data-src="/image/4.png" alt="">
<img src="/image/8.jpg" data-src="/image/5.png" alt="">
<img src="/image/8.jpg" data-src="/image/6.png" alt="">
<img src="/image/8.jpg" data-src="/image/7.png" alt="">
$(window).scroll(handleScroll)
function handleScroll() {
let imgs = $('img[data-src]');
console.log(imgs)
//获取滚动的值
let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
console.log(bodyScrollHeight)
//获取可视高度(屏幕高度)
let windowHeight = window.innerHeight
console.log(windowHeight)
for (let i = 0; i < imgs.length; i++) {
// 获取元素到浏览器顶部的距离
let imgHeight = $(imgs[i]).offset().top
// console.log(imgHeight)
// 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
if (imgHeight < windowHeight + bodyScrollHeight) {
//setTimeout:设置一个定时器，制造懒加载的延迟加载的效果
setTimeout(function () {
$(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
}, 1000)
}
}
}
handleScroll()
原生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'images/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
</script>
</body>
</html>
3-简述媒体查询的作用
media媒体查询可使用在不同的设备及媒体上运行不同的css代码，
如:打印设备，屏幕的大小 ，屏幕的方向
media媒体查询是一个条件，当符合条件时，则运行相应的css代码
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 的区别
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
3、还有回流问题，display:none是会有回流，但是visibility: hidden; 是不会有回流的
6-less 的作用？Scss（sass），stylus 的作用？
sass/scss
SASS 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，sass 不兼容 css 代码
Sass3 就变成了Scss(sassy css) 与原来的语法兼容，只是用{}取代了原来的缩进
sass 的运行 依赖于 ruby 环境（compass 将 sass 编译为 css）
现在可用 node-sass 来编译 sass/scss 文件
node-sass 是一套在 node.js 用 LibSass 編 sass/scss 的工具
原始的sass 是用 ruby 编写的，所以需要 ruby 环境，libSass 是原始sass引擎的一个 c/c++ 接口，使用它编译sass不依赖于ruby，可以使用其他语言使用libSass
node-sass
ruby-sass与libsass的区别
安装node-sass时，会去GitHub 下载一个 .node的文件而这个文件托管在墙外的服务器上，所以失败了 node-sass安装失败解决方案
以 .sass 或 .scss 为文件后缀名称（现在一般都是用 scss）
less
less 2009年出现，受sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了sass演变到了scss的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
less 可以使用 less.js 在浏览器运行时中解析 less 代码
也可以在 node环境中 安装 less，提前编译 less 文件 npm install -g less &lessc styles.less styles.css (可以加参数控制编译后的css排版及压缩)
以 .less 为文件后缀名称
stylus
Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，由 TJ 大神开发
安装及编译 npm install stylus -g & stylus src/ (可以加参数控制编译后的css排版及压缩)
以 .styl 为文件后缀
