每天20道前端面试题（二）

21.如何实现水平、垂直居中？

在别的文章10种方式中，挑选了几个觉得比较常用的，也有其他的可以在链接里面查看！

/* 第一种方案 display:flex 
子元素高度可以设定也可以不设定
*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.app>div{
    width: 100px;
    height: 100px; 
    font-size: 20px;
    background: blueviolet;				
} 

/* 第二种方案 position+margin 
子元素高度可以设定也可以不设定
*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
    
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    margin: auto;
} 

/* 第三种方案 position+transform
子元素高度可以设定也可以不设定
*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    position: relative;
    
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* 第四种方案 
高度就是文字加line-height的高度 
局限性在于必须里边的元素是inline否则不生效*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;
    line-height: 500px;
    text-align: center;
    
}
.app>div{
    width: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;				
} 

/* 第五种方案 横向利用margin auto，垂直还是利用定位和平移 也不用管里边元素的高度*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;								
}
.app>div{
    width: 100px;
    
    font-size: 20px;
    background: blueviolet;	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: auto;
    margin-right:auto ;
}

/* 第八种方案 单行文本好居中 就是让文本的父元素的line-height和高度相同*/
.app{
    width: 500px;
    height: 500px;
    background: greenyellow;		
    text-align: center;
    line-height: 500px;
}
.app>div{
    width: 100px;
    height: 100px;
    font-size: 20px;
    background: blueviolet;	
    display: inline;			
} 

具体参考：最全CSS3实现水平垂直居中的10种方案

22.实现左侧边栏固定，其他内容自适应?

（1）固定宽度区浮动float，自适应区宽度自适应设置margin;
（2）固定宽度区使用绝对定位，自适应区仍然设置margin;
（3）flex布局
具体参考：实现侧栏固定宽度，内容栏宽度自适应

23.做node用了什么框架

1. Node.js Express
   对于一个已经在使用 node.js 的开发人员来说，Express 或者"node.js express"并不是一个新鲜事。Express 框架提供了对 node.js 原生 API 的比较好的封装，从而使开发者更加容易地使用node.js。

Express 框架提供了用来开发强壮的 web/移动应用，以及 API 的所有功能。并且开发人员还能够方便地为它开发插件和扩展，从而增加 Express 的能力。下面列出了一些 Express 提供的基本的功能：

• 可以和任何的第三方数据库进行通讯

• 可以使用任何的用户认证方式

• 可以使用任何符合 Express 接口定义的模板引擎

• 可以按照需要定义工程目录

通过使用 Node Express，你可以使用更少的代码来实现功能。至少通过使用 Node Express，你可以实现中间件来响应 http 请求，可以定义路由表来定义对不同请求的响应函数，还可以使用模板引擎来输出 html 页面。

对于一个 NodeJS 开发新手来说，Express 还提供了如下的好处：1）Express的学习曲线并不陡峭，可以很快上手；2）Express 有非常庞大的社区，和组织良好的文档，新手可以很容易得到所需要的一切。

Express 根据 MIT 协议进行开源，目前 StrongLoop 对它提供支持。

你可以通过 Express 的官方网站 expressjs.com 获得更多的信息。

24.浏览器存储

主要有cookie、localStorage、sessionStorage
详细请看：浏览器存储

25.浏览器图片加载

详情请看：网页图片加载优化方法总结

26.同源策略，跨域，后台如何解决跨域，html有哪些标签可以跨域

详情请看：同源策略，跨域，后台如何解决跨域，html有哪些标签可以跨域

27.http状态码

HTTP状态码的作用是告知客户端，从服务器端返回的请求结果。
详情请看：HTTP状态码

28.用mongodb做过什么

1.什么是MongoDB ?

MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。

在高负载的情况下，添加更多的节点，可以保证服务器性能。

MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。

MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。

2.用MongoDB做过什么项目（什么都没有请看3，现在开始学习也不晚嘛）

3.MongoDB教程

29.node.js

1.什么是node.js？

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

2.安装和使用node.js

Node.js 安装配置

30.vue项目

vue-菜鸟教程

31.本地存储

前端三种本地存储方式

32.微信小程序获取用户信息

1.微信小程序———获取用户信息 以及如何展示到wxml
2.微信小程序——获取用户信息

33.v-model双向绑定原理

1.面试总结：vue实现数据双向绑定的原理
2.浅谈vue双向绑定原理

34.es6

具体看之前写的文章

35.css3的新特性

HTML5和CSS3新特性一览

36.bootstrap的原理

bootstrap的原理

37.jq的语法

JQ语法

38.canvas

详情请看：canvas