前端外包测试题

笔试

简答题

1. 写出 5 个块元素和 5 个行内元素
2. 写出 3 个以上 CSS 的单位，2 个以上浏览器内核前缀
3. 一个有序列表，如何实现「奇数行」背景色为 #fefefe？
4. 写出所有 JS 的数据类型，以及 5 个 ES6+ 的新特性
5. if ([] == []) {console.log(1)} else {console.log(2)}; 的运行结果是什么?
6. 下列元素的实际宽度（左边框到右边框且含边框）是多少？

.item {
	box-sizing: border-box;
	width: 200px;
	padding: 0 10px;
	border: 1px solid #000;
}

7. 修改下面代码，使得该元素内部文字水平垂直居中

.wrap {
	width: 100px;
	height: 100px;
	lint-height: 22px;
	font-size: 14px;
}

8. 写出 5 个常见的 HTTP 状态码，并做简单说明

实践题

实现一个纯 UI 组件，要求：

1. 封装成 react 组件
2. 接收 title 参数，默认值为 「Demo」
3. 返回一个 h1 标签，文本内容为 title

实现一个无序列表组件，要求：

1. 封装成 react 组件，允许用 axios 等第三方库
2. 数据从 api/list/ids 和 api/list/map接口获取，返回数据格式如下：

// api/list/ids
["apple", "orange"]

// api/list/map
{
	apple: "An Apple",
	banana: "Bananana...",
	orange: "Orange juice",
	potato: "I'm not fruit"
}

3. 展示效果如下

1. an apple
2. orange juice

实现 A、B 两个组件，要求：

1. A、B 均为 react 组件，且 B 是 A 的子组件
2. A 中有一个「按钮」，点击弹出一个「Modal 对话框」
3. B 既是 Modal 组件，效果如下图，点击「确定」或「取消」关闭 Modal，内容自定义即可
4. 使用 antd 的 Button 和 Modal 组件
   

Antd 的 Form 组件如何实现「双向绑定」？写出关键点即可

写出完整的 git 命令流程：新建一个 test.txt 文件并推到远程仓库

面试

1. 浏览器渲染机制
2. 绝对定位注意事项，清除浮动
3. 什么是边界塌陷？如何解决？
4. 如何实现一个列表，只有第一个元素没有上边框？
5. 什么是 ES、DOM、BOM？
6. js 的 == 做了什么？
7. 了解函数式编程吗？
8. 说一下浏览器的缓存机制，以及如何利用
9. 什么是 XSS，CSRF 攻击？如何避免？
10. 说几个常用的库，lodash、moment、qs 等