前端笔试基础面试题第二套

1.如何居中div?

Div{
Background:red;
Position:absulute;
Top:50%;
Left:50%;
Transform:translate(-50%,-50%);
}

2.居中一个浮动元素

.box{
position: relative;
left:50%;
float:left;
}
.item{
position: relative; 
left:-50%;
float:left;
background: red;
}

3.什么是盒子模型

Html每一个元素都会被渲染成一个盒子，盒子具有content，padding，border，margin 四个属性

IE盒子模型将border、padding归属于content

4.Css选择器有哪些？哪些属性能够继承？

id选择器、类选择器、标签选择器、通配选择器、伪对象选择器

能够继承的有 font-size font-family color

5.浏览器的内核分别是什么？

IE内核: Trident Firefox内核：Gecko Safari内核：Webkit Opera内核：Presto——>Blink

Chrome内核：Blink/Chromium

6.html5有哪些新特性，移除了哪些元素？

绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage

长期存储数据内容元素，article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

7.行内元素有哪些？块级元素有哪些？空元素有哪些？

（1）行内元素有：a( 锚点) ,b(粗体(不推荐)) ,span(经常使用内联容器，定义文本内区块) img(图片) input(输入框) select(项目选择)

strong(粗体强调) label(表格标签) cite (引用)code(计算机代码)

（2）块级元素有：div ul(无序列表) ol(有序列表) dl(定义列表) table(表格)form(表单) h1 (一级标题))p(段落)pre(预格式化)

（3）常见的空元素： br\ hr\img\ input\ link\meta

8.html5的canvas有什么用

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于 能够直接在 HTML 上进行图形操做，

9.html5如何实现离线储存？有什么特色？

本地离线存储 localStorage 长期存储数据内容元素

在html标签里经过manifest属性引用一个cache.manifest文件，该文件里声明了浏览器需缓存的全部资源文件

配置服务器支持 cache.manifest 的Content-type: manifest

编写 cache.manifest 文件

html页面引用cache.manifest文件

离线浏览--用户可在离线时使用它们。

速度--已经缓存的资源加载得更快。

减小服务器负载--浏览器将只从服务器下载更改过的资源。

10.添加、移动、移除、复制、建立和查找节点？

（1）建立新节点

createDocumentFragment()    //建立一个DOM片
  
  createElement()   //建立一个具体的元素
  
  createTextNode()   //建立一个文本节点
复制代码

（2）添加、移除、替换、插入

appendChild()
  removeChild()
  replaceChild()
  insertBefore()
复制代码

（3）查找

getElementsByTagName()    //经过标签名称
  getElementsByName()    //经过元素的Name属性的值
  getElementById()    //经过元素Id，惟一性
复制代码

11.Document和innerHtml的区别？

document.write是直接写入到页面的内容流，若是在写以前没有调用document.open,

浏览器会自动调用open。每次写完关闭以后从新调用该函数，会致使页面被重写。

innerHTML则是DOM页面元素的一个属性，表明该元素的html内容。你能够精确到某一个具体的元素来进行更改。

若是想修改document的内容，则须要修改document.documentElement.innerElement。

innerHTML将内容写入某个DOM节点，不会致使页面所有重绘

innerHTML不少状况下都优于document.write，其缘由在于其容许更精确的控制要刷新页面的那一个部分。

12.请求跨域资源的方法有哪些?

JSONP\ proxy [ˈprɑːksi]代理\ Cors \ xdr \中转服务器+ajax 一、 经过jsonp跨域

二、 document.domain + iframe跨域

三、 location.hash + iframe

四、 window.name + iframe跨域

五、 postMessage跨域

六、 跨域资源共享（CORS）

七、 nginx代理跨域

八、 nodejs中间件代理跨域

九、 WebSocket协议跨域
复制代码

13.$(document).ready和window.onload的区别？

$(document).ready:是DOM结构绘制完毕后就执行，没必要等到加载完毕。

意思就是DOM树加载完毕，就执行，没必要等到页面中图片或其余外部文件都加载完毕。而且能够写多个.ready。

window.onload:是页面全部元素都加载完毕，包括图片等全部元素。只能执行一次。

14.jQuery中的选择器有哪些？

Id、类、*、元素、集合

15.简单实现$.ajax

$.ajax({
type:"get",
url:"http:/localhost:4002",
dataType:"json",
success:function(data){
show(data);
},
error: function(err){
console.log(err);
} 
})

16.jQuery添加元素的方法

1.append();    在所选元素的结尾添加

2.prepend();    在所选元素的开头添加

3.html();    在所选元素内添加，若是元素内以前有别的内容会覆盖掉

4.after();    在所选元素以后添加

5.before();   在所选元素以前添加

6.text();   在所选元素内添加文本内容

17.Active-class是哪一个组件的属性？镶嵌路由怎么定义？

答：（active-class是vue-router模块的router-link组件中的属性，用来作选中样式的切换；）

嵌套路由是幻灯片的组件，router/index.js，咱们把my，加了children，定义不少个子路由，子路由还能够继续嵌套路由。

定义方法：

细节，children注册，path不用斜杠，访问to：/my/login（组件里面写入children，path路径不用斜杠）

18.Vuex是什么怎么使用？使用场景？

vuex是vue框架中状态管理。在main.js引入store，注入。

新建了一个目录store，...export。应用场景有：单页应用中，组件之间的状态。

应用实例：音乐播放、登陆状态、加入购物车等等

19.vue-cli中src目录下每一个文件夹和文件的用法？

assets文件夹是放静态资源；

components是放组件；router是定义路由相关的配置；

view视图；

app.vue是一个应用主组件；

main.js是入口文件；

20.还用过哪些前端框架简介

React.js只是一个用于视图层的类库(lib)React.js并非模板引擎

angular.js自带模板引擎，路由引擎，有健全的数据双向绑定机制，

内置Ajax请求功能，还可以定义Model。而React.js类库只能用于定义视图组件。

Vue.js相对于较轻量级、没有过多的插件、用什么装什么。