前端面试题目1

前端面试题总结

1 200x200分辨率的div居中用css实现：
div{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
}

2 清楚浮动的几种方式
1 给父元素div增加高度height
2 给父元素加overfolw:hidden
3 在父元素结尾处加div clear：both
4 给父元素加伪类别 clearflex

3 利用原生js给一个按钮绑定两个onclick点击事件
var bar = document.getElementById(“btn”);
bar.addEventLister(“click”,hello1)
bar.addEventLister(“click”,hello2)

 function hello1(){alert("hello1")}
 function hello2(){alert("hello2")}

4 jquery中选择器
id class 标签选择器 属性选择器 伪类 伪元素
权重计算 !import>id>class>```
内联样式style>

5 定时器setInterval 一直执行 setTimeout 只执行一次

6 cookies sesionStorage localstorage
1
cookies 系统缓存。大小不能超过4m
sesionStorage localstorage 储存可达到5m左右
2 localstorage本地储存 不会主动删除本地数据
sesionStorage 数据在当前浏览器窗口，关闭口自动删除
cookies 设置的cookies过期之前一直有效
3 · cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

7 js数据类型：undefined null boolean number string
null代表空值
undefined 表示定义的变量未初始化

8 http 访问是tcp协议 https访问是ssl/tls上的,更加安全

9 常见的http状态码
2开头 （200请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。
这些错误可能是服务器本身的错误，而不是请求出错。

10 网站优化：1压缩打包优化 2按需加载 3 精灵图 4图片编码优化
11 MVVM模式 ：m数据 v视图 vm双向数据绑定
12 px绝对单位 em相对单位
13 js哪些操作引起内存泄漏 ： 1意外的全局变量 2闭包的内存泄漏 3没有清理的dom元素 4被遗忘的定时器或回调
14 AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

15 闭包特性：1函数嵌套函数 2函数内部可以引用函数外部的参数和变量 3参数和变量不会被回收
闭包作用：设计私有方法和变量。----优点：避免全局变量污染 —缺点：变量会常驻内存，易造成内存泄漏

16 隐藏css方法------display：none 彻底消失 visibility：hidden 隐藏元素 opacity:0 透明度为0

17 position定位
relative 绝对定位
absolute 相对定位，与relative共用
fixed 固定定位 相对于浏览器窗口定位

18 同源 协议 端口 域名相同
19 get请求通过浏览器地址栏明文传值 post请求通过提交表单传值（传数据量大 更安全）
20 css3新特性 圆角border-radius 阴影border-shadow 旋转transform

----------vue------面试大全

1 mint-ui基于vue的前端组件，import引入样式和js，vue.ues(mint-ui)全局引入
import ｛Toast｝ from “mint-ui” 组件： Toast{“登录成功”} mint-header mint-swiper

2 axios是什么？怎么使用？描述使用它实现登录功能的流程？
答：请求后台资源的模块。npm install axios -S装好，然后发送的是跨域，
需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。
js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

3 如何让CSS只在当前组件中起作用
将当前组件的

12 delete 和Vue.delete区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值
13 jquery 获取dom对象 与js原生获取对象区别
jquery获取的是对象数组 js元素获取的是对象
转换
js–jquery var box=getElementById(“box”) var $box=$(box)
jquery–js var $box=$(“box”) var box=$box[0]

14 什么是跨域 跨域解决办法
同源策略 协议 端口 域名 是浏览器的安全机制
解决跨域
1 jsonp 只支持get不支持post 利用

--------前端面试题---------
1 写出两种居中方式（垂直和水平都居中） 父元素设置 position：relative
1设置成块元素 text-align: center; margin： position：absolute left:0 right：0 top：0 bottom：0
绝对定位 position
.div{
text-align:center;
width:200px;
height:200px;
margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}
2 （不知道宽高）
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}
3 (已经知道宽高)
.div{
text-align:center;
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
4 flex布局
.div{
width:200px;
height:200px;
display:flex;
justify-content:center; //水平居中
align-items:center //垂直居中
}
2-------弹性盒子模型----
外边距 边框 内边距 内容
3------transform变形 transition动画：属性 时间 效果

--------------es6-------------
1 变量声明新方式 let const
提供的块级作用域，不再具备变量提升
2 箭头函数 没有this 如果有this一定是指向外部this
3 模版字符串

++++++++前端vue+++++++
1 v-show 与v-if区别