最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

近期总结一一些面试题都是企业的面试题笔记题

感觉薪资10k下的都会出笔试题

特别高的薪资都是直接技术面试或者是现场编程

总结很多人的面试题，后期会对于单个知识点再说笔记详细讲解。

看前端面试题库

前端面试题：

1. 一个200*200的div在不同分辨率屏幕上下左右居中，用css实现
<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;"><div style="">上下左右居中</div>
</div>

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

<div id="left">我是左边</div><div id="center">我是中间</div><div id="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: 0 200px;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><div class="left">left</div><div class="center">center</div><div class="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. 解释css sprites ，如何使用？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片
6. 如何用原生js给一个按钮绑定两个onclick事件？

Var  btn=document.getElementById(‘btn’);//事件监听 绑定多个事件var btn4 = document.getElementById("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 只执行一次
setInterval 会一直重复执行

9.请描述一下 cookies sessionStorage和localstorage区别
相同点：都存储在客户端
不同点：1.存储大小

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

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

2.有效时间

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

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

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

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

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

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

看前端面试题库

最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

7. 拖拽会用到哪些事件

最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)相关推荐

最新文章

热门文章