2019最新Web前端经典⾯试试题及答案-史上最全前端⾯试题
（含答案）
近期总结⼀⼀些⾯试题 都是企业的⾯试题笔记题
感觉薪资10k下的都会出笔试题
特别⾼的薪资都是直接技术⾯试或者是 现场编程
总结很多⼈的⾯试题，后期会对于单个知识点再说笔记详细讲解。
部分都是百度的答案，不是特全⾯的，可以⾃⼰
红⾊为常见⾯试题
=============================================================
前端⾯试题：
1. ⼀个200*200的div在不同分辨率屏幕上下左右居中，⽤css实现
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-100px;
height:-100px;
z-index:1000;
}
2. 写⼀个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间⾃适应宽，要求先加载中间块，请写出结构及样式：
<body>
<h3>实现三列宽度⾃适应布局</h3>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
</body>
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
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. 解释css sprites ，如何使⽤？
CSS Sprites其实就是把⽹页中⼀些背景图⽚整合到⼀张图⽚⽂件中，再利⽤CSS的“background-image”，“background-repeat”，“background-position”的组合进⾏背景定位，background-position可以⽤数字能精确的定位出背景图⽚的位置。
CSS Sprites为⼀些⼤型的⽹站节约了带宽，让提⾼了⽤户的加载速度和⽤户体验，不需要加载更多的图⽚
6. 如何⽤原⽣js给⼀个按钮绑定两个onclick事件？
Var  ElementById(‘btn’);
//事件监听 绑定多个事件
var btn4 = ElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7. 拖拽会⽤到哪些事件
· dragstart：拖拽开始时在被拖拽元素上触发此事件，需要设置拖拽所需数据，从操作系统拖拽⽂件到浏览器时不触发此事件.
· dragenter：拖拽⿏标进⼊元素时在该元素上触发,⽤于给拖放元素设置视觉反馈，如⾼亮
· dragover：拖拽时⿏标在⽬标元素上移动时触发.通过阻⽌浏览器默认⾏为设置元素为可拖放元素.
· dragleave：拖拽时⿏标移出⽬标元素时在⽬标元素上触发.此时可以取消掉前⾯设置的视觉效果.
· drag：拖拽期间在被拖拽元素上连续触发
· drop:⿏标在拖放⽬标上释放时，在拖放⽬标上触发.此时需要收集数据并且执⾏所需操作.如果是从操作系统拖放⽂件到浏览器，需要取消浏览器默认⾏为.
· dragend:⿏标在拖放⽬标上释放时，在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.
8. 请列举jquery中的选择器：
9. Javascript中的定时器有哪些？他们的区别及⽤法是什么？
setTimeout 只执⾏⼀次
jquery是什么选择器setInterval 会⼀直重复执⾏
9.请描述⼀下 cookies sessionStorage和localstorage区别
相同点：都存储在客户端
不同点：1.存储⼤⼩
· cookie数据⼤⼩不能超过4k。
· sessionStorage和localStorage 虽然也有存储⼤⼩的限制，但⽐cookie⼤得多，可以达到5M或更⼤。
2.有效时间
· localStorage    存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据；
· sessionStorage  数据在当前浏览器窗⼝关闭后⾃动删除。
· cookie          设置的cookie过期时间之前⼀直有效，即使窗⼝或浏览器关闭
3. 数据与服务器之间的交互⽅式
·
cookie的数据会⾃动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会⾃动把数据发给服务器，仅在本地保存。
10.计算⼀个数组arr所有元素的和
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]=="number") {
sum1+=arr1[i];
}
}
document.write(sum1);
/
/====================================
function sum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
if (typeof arr[i]=="number") {
all+=arr[i];
}
}
return all;
}
document.write(sum2([1,2,3,4]));
11.编写⼀个⽅法去掉数组⾥⾯ 重复的内容  var arr=[1,2,3,4,5,1,2,3]
⼀个数组去重的简单实现
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定义⼀个新的数组
var s = [];
//遍历数组
for(var i = 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(异步javascript xml) 能够刷新局部⽹页数据⽽不是重新加载整个⽹页。
如何使⽤ajax?
第⼀步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象⽤来和服务器交换数据。
var xhttp;
if (window.XMLHttpRequest) {
//现代主流浏览器
xhttp = new XMLHttpRequest();
} else {
// 针对浏览器，⽐如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第⼆步，使⽤xmlhttprequest对象的open（）和send（）⽅法发送资源请求给服务器。
第三步，使⽤xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执⾏⼀些功能就需要使⽤onreadystatechange函数，每次xmlhttprequest对象的readyState发⽣改变都会触发onreadystatechange函数
·  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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。