2022年Web前端面试题目汇总(带答案)

Web培训

400-111-8989

Web培训

发布：Web前端培训
来源：Web前端面试
时间：2022-08-15 17:32

1.一个200*200的div在不同分辨率屏幕上下左右居中，用css实现

<divstyle="width:500px;height:500px;border:1pxsolidgreen;display:flex;justify-content:center;align-items:center;">

<divstyle="">

2.写一个左中右布局占满屏幕，其中左右两块是固定宽度200，中间自适应宽，要求先加载中间块，请写出结构及样式：

<divid="left">我是左边</div>

<divid="center">我是中间</div>

<divid="right">我是右边</div>

html,body{margin:0px;width:100%;}

#left,#right{width:200px;height:200px;background-color:aqua;

position:absolute;}

#left{left:0;top:0;}

#right{right:0;top:0;}

#center{margin:0200px;background-color:blue;height:200px;}

或者利用弹性盒子

<style>

margin:0;

padding:0;

}

html,

body{

height:100%;

}

body{

display:flex;

}

.left{

width:100px;

background-color:rgb(199,170,223);

}

.center{

background-color:rgb(151,228,148);

flex:1;

}

.right{

width:100px;

background-color:rgb(199,170,223);

}

</style>

<body>

<divclass="left">left</div>

<divclass="center">center</div>

<divclass="right">right</div>

</body>

3.阐述清楚浮动的几种方式(常见问题)

1.父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

4.结尾处加空div标签clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理;如果页面浮动布局多，就要增加很多空div，让人感觉很不好

5.解释csssprites，如何使用？

CSSSprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSSSprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片

6.如何用原生js给一个按钮绑定两个onclick事件？

Varbtn=document.getElementById(‘btn’);

//事件监听绑定多个事件

varbtn4=document.getElementById("btn4");

btn4.addEventListener("click",hello1);

btn4.addEventListener("click",hello2);

functionhello1(){undefined

alert("hello1");

}

functionhello2(){undefined

alert("hello2");

}

7.拖拽会用到哪些事件

·dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

·dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

·dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

·dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

·drag:拖拽期间在被拖拽元素上连续触发

·drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

·dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

8.请列举jquery中的选择器：

9.Javascript中的定时器有哪些？他们的区别及用法是什么？

setTimeout只执行一次

setInterval会一直重复执行

10.请描述一下cookiessessionStorage和localstorage区别

相同点：都存储在客户端

不同点：1.存储大小

·cookie数据大小不能超过4k。

·sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

·localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据;

·sessionStorage数据在当前浏览器窗口关闭后自动删除。

·cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3.数据与服务器之间的交互方式

·cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

·sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

10.计算一个数组arr所有元素的和

vararr1=[1,2,3,4,5,6,7,8,9];

varsum1=0;

for(vari=0;i<=arr1.length;i++){

if(typeofarr1[i]=="number"){

sum1+=arr1[i];

}

document.write(sum1);

//====================================

functionsum2(arr){

varall=0;

for(vari=0;i<arr.length;i++){

if(typeofarr[i]=="number"){

all+=arr[i];

}

returnall;

}

document.write(sum2([1,2,3,4]));

11.编写一个方法去掉数组里面重复的内容vararr=[1,2,3,4,5,1,2,3]

一个数组去重的简单实现

vararr=['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

//定义一个新的数组

vars=[];

//遍历数组

for(vari=0;i<arr.length;i++){

if(s.indexOf(arr[i])==-1){//判断在s数组中是否存在，不存在则push到s数组中

s.push(arr[i]);

}

console.log(s);

//输出结果：["abc","abcd","sss","2","d","t","ss","f","22"]

方法二：用sort()然后相邻比较也可以实现

12.document.write和innerHTML的区别：

document.write是直接写入到页面的内容流，如果在写之前没有调用document.open,浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。

innerHTML将内容写入某个DOM节点，不会导致页面全部重绘

innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。

13.ajax的步骤

什么是ajax？

ajax(异步javascriptxml)能够刷新局部网页数据而不是重新加载整个网页。

如何使用ajax？

第一步，创建xmlhttprequest对象，varxmlhttp=newXMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。

varxhttp;

if(window.XMLHttpRequest){

//现代主流浏览器

xhttp=newXMLHttpRequest();

}else{

//针对浏览器，比如IE5或IE6

xhttp=newActiveXObject("Microsoft.XMLHTTP");

}

第二步，使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

14.xml和json的区别，请用四个词语来形容

·JSON相对于XML来讲，数据的体积小，传递的速度更快些

·JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互

·XML对数据描述性比较好;

·JSON的速度要远远快于XML

15.清楚浮动的方法？(多次出现在面试题)

1.父级div定义height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理;如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义伪类:after和zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题(目前：大型网站都有使用，如：腾迅，网易，新浪等等)

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

16.box-sizing常用的属性有哪些？分别有什么作用？

属性值

·box-sizing：content-box

·box-sizing：border-box

·box-sizing：inherit

content-box

·这是box-sizing的默认属性值

·是CSS2.1中规定的宽度高度的显示行为

·在CSS中定义的宽度和高度就对应到元素的内容框

·在CSS中定义的宽度和高度之外绘制元素的内边距和边框

border-box

·在CSS中微元素设定的宽度和高度就决定了元素的边框盒

·即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

·CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

(Q1)box-sizing:content-box|border-box|inherit;

(Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。

border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

17.css选择器有哪些，选择器的权重的优先级

选择器类型

1、ID　　#id

2、class　　.class

3、标签　　p

4、通用　　*

5、属性　　[type="text"]

6、伪类　　：hover

7、伪元素　　::first-line

8、子选择器、相邻选择器

权重计算规则

1.第一等：代表内联样式，如:style=””，权值为1000。

2.第二等：代表ID选择器，如：#content，权值为0100。

3.第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4.第四等：代表类型选择器和伪元素选择器，如divp，权值为0001。

5.通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6.继承的样式没有权值。

18.块级元素水平垂直居中的方法有哪些(三个方法)

让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px00-150px}

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{

position:absolute;

left:0px;

right:0;

top:0;

bottom:0;

margin:auto;

height:200px;

width:300px;

}

jQuery实现水平和垂直居中

原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置div等块级元素的CSS。

jquery代码：

$(window).resize(function(){

$(".myblock").css({

position:"absolute",

left:($(window).width()-$(".myblock").outerWidth())/2,

top:($(window).height()-$(".myblock").outerHeight())/2});

});

此外在页面载入时，就需要调用resize()方法

$(function(){

$(window).resize();

});