2021-10-22 web前端实习笔试

DA2LE

于 2021-10-22 21:26:43 发布

阅读量281

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44295310/article/details/120907357

版权

1. label的的用法

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

2. cookies，sessionStorage 和 localStorage 的区别

cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器和服务器间来回传递，而 sessionStorage 和 localStorage 不会自动把数据发送给服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下
存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的 cookie 过期时间之前有效，即使窗口关闭或浏览器关闭
作用域不同，sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；localstorage
在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中都是共享的

3. 如何使一个盒子水平居中

方法一：计算父盒子与子盒子的空间距离

.parent {
	width: 500px;
	height: 500px;
}
.child {
	width: 100px;
	height: 100px;
	margin-left: 200px;
}

方法二：利用定位

.parent {
	width: 500px;
	height: 500px;
	position: relative;
}
.child {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50%;
	margin-left: -50px;
}

方法三：利用 transform

.parent {
	width: 500px;
	height: 500px;
	position: relative;
}
.child {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

方法四：利用 margin: 0 auto

.parent {
	width: 500px;
	height: 500px;
	position: relative;
}
.child {
	width: 100px;
	height: 100px;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}

方法五：利用 display: table-cell

.parent {
	width: 500px;
	height: 500px;
	display: table-cell;
	text-align: center;
}
.child {
	width: 100px;
	height: 100px;
	display: inline-block;
}

方法六：利用 display: flex

.parent {
	width: 500px;
	height: 500px;
	display: flex;
	justify-content: center;
}
.child {
	width: 100px;
	height: 100px;
}

4. em/rem

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素
IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem

5. vw/vh

vw 和 vh 是前端开发中的一个动态单位，是一个相对于网页视口的单位。
系统会将视口的宽度和高度分为100份，1vw 占用视口宽度的百分之一，1vh 占用视口高度的百分之一。
vw、vh 和百分比不同的是，百分比永远都是以父元素为参考，而 vw、vh 是以视口作为参考。

6. flex 布局

默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
父级加了这条属性，子级的 float、vertical-align 就会失效
如果兼容低版本的机型要加前缀 -webkit-

7. CSS预处理器

CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。
不需要考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。
可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。

8. 请问 p.name 是：

var fun = function(){
	this.name = 'peter';
	return {
		name: 'jack'
	};
} 
var p = new fun();

jack

9. var, let, const 之间的区别

var 声明变量可以重复声明，而 let 不可以重复声明
var 是不受限于块级的，而 let 是受限于块级
var 会与 window 相映射（会挂一个属性），而 let 不与 window 相映射
var 可以在声明的上面访问变量，而 let 有暂存死区，在声明的上面访问变量会报错
const 声明之后必须赋值，否则会报错
const 定义不可变的量，改变了就会报错
const 和 let 一样不会与 window 相映射、支持块级作用域、在声明的上面访问变量会报错

10. keep-alive 的作用

在开发 Vue 项目的时候，大部分组件是没必要多次渲染的，所以 Vue 提供了一个内置组件 keep-alive 来缓存组件内部状态，避免重新渲染

11. 给定一个排序数组，你需要在原地删除重复出现的元素，使得每个元素只出现一次，返回移除后数组的新长度。不要使用额外的数组空间，你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。

function unique (arr) {
	for (var i = 0; i < arr.length; i++) {
		for (var j = i + 1; j < arr.length; j++) {
			if (arr[i] == arr[j]) {
				arr.splice(j, 1);
				j--;
			}
		}
	}
	return arr;
}