前端的一些面试题总结，从网上整理的，等面试用_宽高都是200 px水平居中与浏览器中相关代码-优快云博客

本文链接：https://blog.youkuaiyun.com/PINK789/article/details/85220346

这篇博客整理了前端面试中常见的问题，包括如何实现div居中、左中右布局、CSS Sprites的优化、原生JS事件绑定、拖拽事件、jQuery选择器、cookies、sessionStorage与localStorage的区别、数组处理技巧以及事件冒泡与阻止冒泡等知识点，是面试准备的好帮手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、一个宽高200px的div在浏览器中居中

div{
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;
    margin-top:-100px;
}

2、页面分为左中右三部分，左右宽度固定，中间宽度自适应

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
             *{margin:0px;padding:0px;}
             #left{width: 200px;height: 200px;float: left;background-color: pink;}
             #right{width: 200px;height: 200px;float: right;background-color: blue;}
             #middle{height: 300px;}
        </style>
    </head>
    <body>
        <div id="content">
            <div id="left">我是左侧内容我是左侧内容我是左侧内容我是左侧内容我是左侧内容</div>
            <div id="right">我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容我是右侧内容</div>
            <div id="middle">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
        </div>
    </body>
</html>

3、CSS Sprites功能

优点：将多个小图片整合到一张大图片上，通过background-position定位，减少浏览器向服务器请求数据的次数，优化性能

4、怎么使用原生JS给同一个按钮绑定两个onclick事件

   var el = document.getElementById('btn');
   el.addEventListener('click',hello1);
   el.addEventListener('click',hello2);
   function hello1(){
      console.log('1')
   }
   function hello2(){
      console.log('2')
   }

5、拖拽会用到哪些时间

draggable:html属性，三个属性值，规定该元素是否可以被拖动（链接和图片默认可以拖动，无需该属性）

dragstart：开始拖动元素时候出发该事件（从操作系统拖拽文件到浏览器时不触该事件）

dragenter：当被鼠标拖动的元素进入容器时触发该事件

dragover：当被拖动对象在另一容器范围内移动时触发该事件

dragleave：当被拖动对象离开容器范围时触发

drag：在一个拖动过程中释放鼠标时触发

dragend：用户完成拖拽后触发

6、jq选择器

1：元素选择器

2：属性选择器

$('[href]');        //选择所有带有href属性的元素
$("[href='#']");    //选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']");   //选取所有带有 href 值不等于 "#" 的元素。
$("[href $='.jpg']"); //选取所有 href 值以 ".jpg" 结尾的元素。

3：CSS选择器：用于更改元素的css属性

$("p").css("background-color","red");

4：$(this)

7、cookies，sessionStorage和localStorage的区别

相同点：都存储在客户端

不同点： 1：存储大小

a.cookie 数据大小不能超过4k

b.sessionStorage和localStorage 虽然也有存储大小的限制，但是通常可以达到5M甚至更大

2：有效时间

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

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

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

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

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

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

8、数组去重

 var arr = [1,1,2,2,3,3,4,4,5,5];
     var arr2=[];
     for (var i = 0; i < arr.length; i++) {
     	if (arr2.indexOf(arr[i]) == -1) {
     		arr2.push(arr[i]);
     	}
     }
    console.log(arr2);

9、数组排序

1：sort()方法，对原数组进行排序，不生成副本，按照字符编码顺序进行排序

var arr = [7,5,2,1,26,1];
arr.sort();  //输出的arr顺序为  [1, 1, 2, 26, 5, 7]

2：函数方法

var arr = ['7','5','2','1','26','1'];
function sortNumber(a, b)
{
return a - b
}
console.log(arr.sort(sortNumber));

10、事件冒泡

定义：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）

事件捕获：即不太具体的节点更早接收到事件，而最具体的节点应该最后接收到事件

11、阻止冒泡

a)cancleBubble=true //原生

b)@chick.stop='show()' //vue

12、document.write和innerHTML的区别：

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

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

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

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