每天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;
} 

每天20道前端面试题(二)

/* 第三种方案 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

上一篇:如何将div中的内容居中


下一篇:01发射的图片