web前端面试题（一）

最新推荐文章于 2025-06-12 13:49:47 发布

chen921190096

最新推荐文章于 2025-06-12 13:49:47 发布

阅读量521

点赞数

CC 4.0 BY-SA版权

分类专栏：面试题文章标签： html css javascript html5 es6

本文链接：https://blog.youkuaiyun.com/chen921190096/article/details/106205862

面试题专栏收录该内容

1 篇文章

订阅专栏

本文主要探讨了前端面试中常见的问题，包括清除浮动的方法、CSS垂直居中的多种方式、HTML5新标签、闭包的概念及其优缺点、JavaScript定时器的区别、cookie、sessionStorage和localStorage的差异、数据类型的区分、数组去重、Vue常用指令、AJAX的基本流程、检测变量类型、HTTP状态码、跨域解决方案以及CSS特殊效果的实现。这些问题深入浅出，是前端开发者面试准备的重要参考。

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

阐述清除浮动的几种方法？

清除浮动的原因：为了解决父级元素因为子级浮动引起的内部高度为0的问题。
1.额外标签法：就是我们常说的clear:both,在父标签内最后添加一个空的子标签，设置clear:both
2.给父元素设置固定高度
3…父级div定义overflow:hidden（必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度）
4.使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;

css垂直居中的几种方法？

1.使用绝对定位和负外边距对块级元素进行垂直居中

		position:absolute;
		top:50%;left:50%;
		margin-top:-50px;//高度的一半
		margin-left:-50px;//宽度的一半

2…使用绝对定位和transform

		positon:absolute;
		top:50%;
		transform:translate(50%,-50%)

3.绝对定位结合margin:auto

		position:absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
		margin:auto;

4.使用flex布局
此方法是设置父元素内的子元素

		<!DOCTYPE HTML>
<html>
<style>
div{
	width:100px;
    height:100px;
    background-color:red;
    display:flex;
	align-items:center;
	justify-content:center
}
</style>
<body>

<div>1</div>

</body>
</html>

更多详细方法请前往

请列举五个以上H5标签？

<html>
<head>
<title>
<link>
<div>
<p>
h1`h6等等

更多更详细请查看原网站

什么是闭包？闭包的优缺点？

用途：既重用一个变量，又保护变量不被污染的编程方法
本质：外层函数的作用域对象呗内层函数引用着，无法释放，这个函数的作用域就是闭包对象
优点：可以重用变量，不被外部污染
缺点：比普通函数占用更多的内存

JS的定时器有哪些？它们的区别和用法是什么？

这个相信大家都知道，分为两种：
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式
定时器详细请前往

请描述一下cookie，sessionStorage,localStorage的区别？

这个小编目前也在仔细研究中，建议百度查询

JS有几种数据类型？其中基本数据类型有哪些？？

数据类型有两种：基本数据类型，引用数据类型；
基本数据类型：Undefined;Null;Boolean;Number和String,symbol
引用数据类型：Object；Array；Function等

编写一个方法，除掉数组里面重复的内容？

var arr=['abc','abcd','sss','2','d','t','2','ss','f','22','d']
for(var i=0;i<=arr.length;i++){
	for(var j=i+1;j<=arr.length;j++){
		if(arr[i]==arr[j]){
			arr.splice(i,1);
			j--;
			}
	}
}
console.log(arr)

以上是ES5循环写法，面试时有时候还会闻到ES6写法以下便是一种：
使用set去重：

function fun(arr){
		return Array.from(new Set(arr))
	}
var arr=['abc','abcd','sss','2','d','t','2','ss','f','22','d']
console.log(fun(arr))
Array.from()==>浅拷贝一个数组，或者类数组；
Set()====>ES6中的新方法，类似一个数组，但是其中的值都是唯一的，本身是一个构造函数，用来生成Set的数据结构

请列举vue中几种常用的指令，以及它的方法？

{{}}//文本插值
v-bind://属性绑定
v-for//循环
v-show//显示隐藏
v-if//也可以控制显示隐藏，但是手段不同
v-model//双向绑定
v-on//事件绑定
…

什么事ajax?请写出ajax的步骤？

本质：使用js提供的异步对象，向服务器发送请求，并且接收相应消息。
具体步骤：
1.创建异步对象
2.创建请求
3.发送请求
4.接收响应

var xhr=new XMLHttpRequest();
	xhr.onreadyStateChange=function(){
	if(xhr.readyState===4&&xhr.status===200){
			var result=xhr.responseText;
		}
	}
	xhr.open('方法'，'url',isAsyn)//isAsyn是控制是否异步
	xhr.send()

JS中如何检测出一个变量是String类型？请写出一个函数实现？

function isString(obj){
    return typeof(obj) === "string"? true: false;
    // returntypeof obj === "string"? true: false;
}//其他的方法建议百度查看

请写出常见的http状态码？

1xx:正在请求提示的信息
200：响应成功
3xx:重定向
	301：永久重定向
	302：临时重定向
	304：命中缓存
4XX:
	403:权限不够
	404:请求资源不存在
	405：请求方法不被允许
5XX:
	500:服务器代码出错

什么是跨域？怎么解决跨域问题？

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
解决方法：
1.CORS跨域：指的是修改响应头
2.JSONP跨域：动态生成script，携带处理函数发送给发送给服务器，服务器将数据包裹到函数内返回

JS实现一个无限累加的add函数？

	function add(a){
		function sum(b){
			a=a+b;
			return sum;
		}
		sum.toString=function(){
			return a
		}
        return sum
	}
console.log(add(1)(2))

CSS写一个三角形及0.5毫米的线？

<!DOCTYPE html>
<html>
<style>
	#top{
    	width:0;
        height:0;
        border-bottom:50px solid red;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-top:50px solid transparent;
    }
</style>
<body>

<div id="top"><div>
</body>
</html>

向上三角
关于画0.5毫米的线有什么用这一点小编在写这篇报道之前真的很疑惑，特地搜索了一下，直接通过样式来设置0.5px的边框。当然这个方案是非常理想的方案，但是事实总是残酷的，它只在 iOS 8+ 上支持，对于 Android 无法支持。

	<!DOCTYPE html>
	<html>
	<style>
		.bd-t{
	  position:relative;
	}
	
	.bd-t:before{
	  content: "  ";
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 1px;
	 border-top:1px solid #e0e0e0;
	  /* 如果不用 background-color, 使用 border-top:1px solid #e0e0e0; */
	  -webkit-transform: scaleY(.5);
	  transform:scaleY(.5);
	}
	</style>
	<body>
	<div class="bd-t"></div>
	</body>
	</html>