前端面试试题收集

时间 2019-11-16

原文原文链接

本文仅记录本人学习知识，文章出现的题目都是转载网络的。互相学习，一块儿成长！

1. css常见结构布局

全背景下等宽内容居中
绝对底部
水平垂直居中
圣杯布局 (两边等宽，中间自适应的三栏布局)
双飞翼布局 (两边等宽，中间自适应的三栏布局)
类订单布局 (为左侧高度不固定，右侧自适应高度而且居中)
Flex 布局

2.用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值。

var arr = new Array(5);
function insertRandom(n) {
  if (n < 0) return
  let tmp = Math.floor(Math.random() * 31 + 2)
  if (arr.indexOf(tmp) !== -1) return insertRandom(n)
  arr[n] = tmp
  return insertRandom(n - 1)
}
insertRandom(arr.length - 1)

3.background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框下面

语法：css
- background-clip: border-box;背景延伸至边框外沿（可是在边框下层）
- background-clip: padding-box;背景延伸至内边距（padding）外沿。不会绘制到边框处。
- background-clip: content-box;背景被裁剪至内容区（content box）外沿。
- background-clip: text;背景被裁剪成文字的前景色。(有兼容性，谷歌不支持，火狐支持)
例子：半透明边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {
        width: 100%;
        padding: 60px 80px 80px;
        background: #b4a078;
    }
    div {
        padding: 12px;
        margin: 20px auto;
        background: white;
        border: 10px solid hsla(0, 0%, 100%, .5);
        background-clip: padding-box;
    }
    label {color: #f4f0ea;}
</style>

<body>
    <main>
        <div>A paragraph of filler text. La la la de dah de dah de dah de la.</div>
    </main>
</body>
</html>

输出：

4.实现多重边框

语法：html
- 图一多重阴影边框用到box-shadow还接受第四个参数做为阴影扩张半径，当咱们只设置扩张半径时，零偏移，零模糊，产生的效果其实至关于一条实线“边框”。
- 图二描边用到outline和对应的描边偏移outline-offset来实现
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  main{
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  div:nth-of-type(1) {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fafafa;
    margin: 105px 29px;
    box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,  
                0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,  
                0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
                0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
  }
  div:nth-of-type(2){
    width: 200px; height: 120px;
    background: #efebe9;
    border: 5px solid #B4A078;
    outline: #B4A078 dashed 1px;
    outline-offset: -10px;
    margin-bottom: 20px;
  }
</style>
<body>
    <main>
        <div></div>
        <div></div>
      </main>
</body>
</html>

输出：

5.实现边框内圆角

语法：html5
- box-shadow是会紧贴border-radius圆角边的，可是，描边outline并不会与圆角边border-radius贴合，咱们能够将二者组合，经过box-shadow去填补描边outline所产生的间隙来达到咱们想要的效果。张半径，当咱们只设置扩张半径时，零偏移，零模糊，产生的效果其实至关于一条实线“边框”。
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {width: 100%;}
    div {
        width: 209px;
        margin: 29px auto;
        padding: 8px 16px;
        border-radius: 8px;
        background: #f4f0ea;
        outline: 6px solid #b4a078;
        box-shadow: 0 0 0 5px #b4a078;
    }
</style>
<body>
    <main>
        <div>例子</div>
    </main>
</body>
</html>

输出：

6.实现图片背景定位

语法：正则表达式
- background-position:一种CSS数据类型，2D坐标空间，用来设置相对盒子的坐标。
- calc：表达式使用标准运算符优先规则表示其包含的数学计算的结果，意味着从左到右计算表达式；除法或乘法将在加减运算符以前运算，括号内的表达式将首先进行计算。
```
.el 
{
margin-left: calc(10% + 10px); //将元素的左边距指定为其父级宽度的 “10%” 加上额外的 “10px”;
margin-left: calc(10% - 10px); //将元素的左边距指定为其父级宽度的 “10%” 减去额外的 “10px”：
}
```

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {
        width: 100%;
        padding: 80px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    div {
        width: 229px;
        height: 139px;
        margin: auto;
        color: #f4f0ea;
        padding: 16px 29px 28px 20px;
        background: #b4a078 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAAqCAMAAABx9cIXAAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOXRSTlMAcBBQoPHQMJDgH/uwCwLs2iUU+MhgGuZ2BgRq1sx8VT+lnFk7K/WYAbyHgDXBuKqUi0llTbNFrYJ+UzMgAAAFQUlEQVRYw7VY53qiQBSlKS2IICq22Ets0ViSef8X27kwMo2yZL89f5Q77XD7oHDQZjf1oN5mmlKGljlV3+PRPVCqYSOENOXf0YsnLiKYxL2CWUP9u4EI+ovVfyDnOUd91OVEoeUiFu4lVGTsujbiEM1+Tc7Teo6zNo+zL73bVeMfy/j+iMb9DgKc2Jm6j0T4U1m5H0jC1uOmrE0OfTxjxYsGZOYZ5UMkt3snMvuxsBaPl3Z+djy3Yz+VN05z6zKfdIgLcB7QQFVwyMwIleCD7rhHgHb8WueobQS48tySgzuLVYvY5f6Wrgt/Ra7Nixv99uT0Zlz26vLLZHYcJYOjIev3o+QUlbVpYvlPTk9mlOhu8BtysJ1+n63MtdPTBkoBTLDPWEwMzhjC4kgTSATPNzF4LYRhUcGXXgWP7AdurVShNcHTmnJsak2QD1n1urq8/ADsjkpthOAQbOxq2k6e1YVXcHgZtePtRbVBrCxhDhmFk6hgfnEaxNyCeQ74Zc3cnDMEx5wqeZjCyw3p3uddbr6C4P7i/ARcmHowDc4l87zCz48qcncauBIgrd1T2/exUQvq1ZIcQwEpZyZb0Q2FcxdV5D7FjYS3+1YAT/xvXuS0Y+FcZQtpSHaekyi4VpAbNHCkCjJuySaJ8gtkenmc+lhXtMZY1sE7K4ixIK4gNxMWyV78JBnT3hW2DKJaPUhODufZEE8mK9lDtFWQi0sTwZFQD6GIKoVovrLCTktxgtDWGHxBE0P+DzLT6yI5ORF0hsU5cJMmhSdrOBmX184a+gt0MzuvRHJyhE+UYkzS4RtrFBkjGK5JDjJBIJMTo/6NE0h+3Mc/P3hpWDwLjHavSQ7YhBXksOtelHKD4R8LG79klvk6cqD+BdZZLmxQuPDIYaQotGxTCDGFOyQDrxSHhFI0UuqhgyqgJuT23CK5rHuV5Jxkr1rwUCW5Ss1ZqVm35eTWbDAHagmyqNIsHj4kK04yS5pDQynGAqEN/rnipcPiWSu2qOvl6uBQERBjKPvFOKfpNRYzvty+zP4DOZxu7PKr3Yk0Hk+ltMoF9ck5h8PhXSTXAyGxklWawSBvXYhTxcXkvrHxWyw5vSJsaJ76EMl5DdpfduFvqb3A04c48M/FRc6HprY2uXADXSpPjvj3hK4QG7WbYRhx1oIHxPodTQhRPGsRvjqbfX1y4AztlkTOcakHj7FJNPE6RtSpbV7tRiyn2dbp1bkvoIbXJuf5ZE9KjrZ+D8o/zinkjSCldMhatnZLvgDB0h5+F7vFkYvecnAGcvwhvpdD7ogw1pkW/VDycLgqaz7NILDzLafeu6tEcT+KUjNaW22yTE4lJ3q9mOd4nWZD5YCRT6Zj9rnbPvFdG4JmE9Ymt6TLKDnmpVOlBG5OcjyCEOYE7E0s8oRrZYRS7BWenN3MwZg9pwVPVn4S3sHDlnYertjnxuKp6w74v8DOaSCADeJ6AbGk2pErxJQODiYIwxrwtzJb/ESjgqAZyC0V+F0NclRxW6l8saMGWdVHGO3lkFJbyt/AdgZIOlfGvcw5UVxNclRxMjk6HBCT9RGgf5muNa+3Xm59lMKdsYntO5U9RquepwXPQ4QIjLrkhu1slWYmAIHGh7LxWtdEMnzgG7LsrkhGB4rQUiDn2znoU3KBgRGQbwkZNCZLQfnJ7Lh3EQ/36p0gVXNX6aeNBETrG8nYv2yZBh2JnAxn20AUm0WARTa+Z0z5rUZjjpqOuc/xrEddchTnSnIAT99GPtSLaDv1iqcd38/2Bptz/KkGeeOmUYKcpvCeDYqH/gH0uaoGeLQhjwAAAABJRU5ErkJggi8qICB8eEd2MDB8YzcwNDdjMGQ3NzA2ZTI2ZDhlZTlhMDVjOTFkZDA3MzggKi8=') no-repeat bottom right / 78px 21px;
    }
    div:nth-of-type(1) {
        background-position: right 29px bottom 28px;
    }
    div:nth-of-type(2) {
        background-origin: content-box;
        margin: 29px 0;
    }
    div:nth-of-type(3) {
        background-position: calc(100% - 29px) calc(100% - 28px);
    }
</style>

<body>
    <main>
        <div class="block1">background-position方案</div>
        <div class="block2">background-origin方案</div>
        <div class="block3">calc方案</div>
    </main>
</body>
</html>

输出：

7. 页面导入样式时，使用link和@import有什么区别？

link是HTML标签，@import是css提供的。
link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
link没有兼容性问题，@import不兼容ie5如下。
link能够经过js操做DOM动态引入样式表改变样式，而@import不能够。

8. html的元素有哪些（包含H5）？

块级元素：算法

名称	做用	名称
head		div
meat	申明页面的诸多属性	ul
title	窗口标题	li
style	样式	ol
body	文本内容	p
header	头部块	dl
section	内容块	dt
footer	底部块	dd
article	文章标签	form
hr	下划线	table
h1-h6	描述标题	theader
aside		tbody
nav		tr
menu		th
bir

行内元素：json

名称
label
a
span
td
input
button
strong
b
i

9. CSS3有哪些新增的特性？

边框(borders):api
- border-radius 圆角
- box-shadow 盒阴影
- border-image 边框图像
背景:跨域
- background-size 背景图片的尺寸
- background_origin 背景图片的定位区域
- background-clip 背景图片的绘制区域
渐变：数组
- linear-gradient 线性渐变
- radial-gradient 径向渐变
文本效果:浏览器
- word-break
- word-wrap
- text-overflow
- text-shadow
- text-wrap
- text-outline
- text-justify
转换
2D转换属性
- transform
- transform-origin
2D转换方法
- translate(x,y)
- translateX(n)
- translateY(n)
- rotate(angle)
- scale(n)
- scaleX(n)
- scaleY(n)
- rotate(angle)
- matrix(n,n,n,n,n,n)
3D转换：
3D转换属性：
- transform
- transform-origin
- transform-style
3D转换方法
- translate3d(x,y,z)
- translateX(x)
- translateY(y)
- translateZ(z)
- scale3d(x,y,z)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- rotate3d(x,y,z,angle)
- rotateX(x)
- rotateY(y)
- rotateZ(z)
- perspective(n)
过渡
- transition
动画
- @Keyframes规则
- animation
弹性盒子(flexbox)
多媒体查询@media

10. 写一个方法去掉字符串中的空格

实现思路：用正则表达式中的replace方法匹配，'s'是指空白符(包括空格，换行符，回车符，换页符，制表符等)；<br/>
若是正则表达式不太明白的掘友，能够查看我以前写过有关正则表达式的我的总结篇

var trim = function(str){
    str.replace(/\s*/g,""); //去除字符串内全部的空格
    str.replace(/^\s*|\s*$/g,""); //去除字符串内两头的空格
    str.replace(/^\s*/,""); //去除字符串内左侧的空格
    str.replace(/(\s*$)/g,""); //去除字符串内右侧的空格
}

11. 在页面上隐藏元素的方法有哪些？

占位:
- visibility: hidden;
- margin-left: -100%;
- opacity: 0;
- transform: scale(0);
不占位:
- display: none;
- width: 0; height: 0; overflow: hidden;
仅对块内文本元素:
- text-indent: -9999px;
- font-size: 0;

12. 去除字符串中最后一个指定的字符？

function delLast(str, target) {
  return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
}
const str = delLast('asdfghhj', 'h')
console.log(str) // asdfghj

13. CSS选择器有哪些？哪些属性能够继承？

CSS选择器

能够继承的经常使用属性
- font-size
- font-weight
- font-style
- font-family
- color
- text-indent
- text-align
- text-shadow
- line-height
- word-spacing
- letter-spacing
- text-transform

14. 写一个方法把下划线命名转成大驼峰命名？

function transfor (str){
    var reg=/-[a-z]/g;
    return str.replace(reg,function(vc){
        return vc.slice(1).toUpperCase();
    })   
}

transfor("get-element-by-id");  //getElementById

15. 简述超连接target属性的取值和做用

_self: 在当前窗口打开页面
_blank: 在新窗口打开页面
_top: 在整个框架打开页面不是很理解(在iframe或者frameset里用的比较多)

16. 写一个把字符串大小写切换的方法

语法：
字符转ascii码：用charCodeAt()

ascii码转字符：用fromCharCode(number)

数组转字符串: Array.join("-")

字符串转数组: String.split(",")

function tansfrom(str){
//先把字符串转为数组
var charStr=str.split("");
//遍历数组
    for(let i=0;i<charStr.length;i++){
        if(charStr[i].charCodeAt()>=65&&charStr[i].charCodeAt()<=90){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()+32);
        }else if(charStr[i].charCodeAt()>=97&&charStr[i].charCodeAt()<=122){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()-32);
        }
    }
    return charStr.join("");
}
tansfrom("abA");

17. 认识BFC规范

BFC 全称为 块格式化上下文。是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由如下之一建立：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具备 position 为 absolute 或 fixed)
- 内联块 (元素具备 display: inline-block)
- 表格单元格 (元素具备 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具备 display: table-caption, HTML表格标题默认属性)
- 具备overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当老是会建立一个新的格式化上下文，即使具备 column-span: all 的元素并不被包裹在一个多列容器中。
特性：
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。
- 每一个元素的左外边距与包含块的左边界相接触（从左到右），即便浮动元素也是如此
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

18. 统计某一字符或字符串在另外一个字符串中出现的次数

方法一：

function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}

console.log(strCount('abcdef abcdef a', 'abc'));

方法二：

function substrCount(str, target) {
  let count = 0;
  while (str.includes(target)) {
    const index = str.indexOf(target);
    count++;
    str = str.substring(index + target.length);
  }
  return count;
}

方法三：（推荐！）

var str="abcdacd";
var target="a";
var childInNums = str.split(target).length - 1;

19. 浏览器内多个标签页之间的通讯方式有哪些？

stroage

localStorage和sessionStorage

localStorage保存数据会一直保存没有过时时间，不会随浏览器发送给服务器。大小5M或更大

sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大

localStorage和sessionStorage都继承于Storage，提供了统一的api来访问和设置数据。api列表为：

clear 清空存储中的全部本地存储数据
getItem 接受一个参数key，获取对应key的本地存储
key 接受一个整数索引，返回对应本地存储中索引的键
removeItem 接受一个参数key，删除对应本地存储的
keysetItem 接受两个参数，key和value，若是不存在则添加，存在则更新。

localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();// 对象访问方式一样有效
localStorage.order = 'b110';
localStorage.order; // b110

postmessage

postMessage()方法容许来自不一样源的脚本采用异步方式进行有限的通讯，能够实现跨文本档、多窗口、
跨域消息传递。html5引入的message的API，主要的功能：
1.页面和其打开的新窗口的数据传递
2.多窗口之间消息传递
3.页面与嵌套的iframe消息传递
4.上面三个问题的跨域数据传递

postMessage(data,origin)方法接受两个参数

 1.data:要传递的数据，html5规范中提到该参数能够是JavaScript的任意基本类型或可复制的对象，
 然而并非全部浏览器都作到了这点儿，部分浏览器只能处理字符串参数，因此咱们在传递参数的
 时候须要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js能够实现相似效果。

2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，因此能够不写，
这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，
固然若是愿意也能够建参数设置为"*"，这样能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

index.html

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">Frame Color</div>
</div>
<div>
    <iframe id="child" src="https://www.test2.com/test2.html"></iframe>
</div>


window.onload=function(){//传输数据
    window.frames[0].postMessage('getcolor','http://lslib.com');
}

test2.html

window.addEventListener('message',function(e){ //接收消息
    if(e.source!=window.parent) return;
    var color=container.style.backgroundColor;
    window.parent.postMessage(color,'*');
},false);

20. 渐进加强和优雅降级

渐进加强
一开始就针对低版本浏览器进行构建页面，完成基本的功能，而后再针对高级浏览器进行效果、
交互、追加功能达到更好的体验。
优雅降级
一开始就构建站点的完整功能，而后再针对低版本浏览器进行兼容。
好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack
使其能够在低版本浏览器上正常浏览。

若低版本用户居多，则优先采用渐进加强的开发流程；
若高版本用户居多，则为了提升大多数用户的使用体验，那固然优先采用优雅降级的开发流程。

21. 写一个判断数据类型的方法

分析
typeof 只能判断基本类型 string,number,boolean,undefined,object
null 会被判断成 object
比较全面的是使用 Object.prototype.toString 方法，只须要对返回值进行字符串分割便可

const typeCheck = (obj) => {
  const typeStr = Object.prototype.toString.call(obj); //返回格式：[object xxxxx]
  return typeStr.toLowerCase().slice(8, typeStr.length - 1);
};

console.log(typeCheck("str")); //string
console.log(typeCheck(1)); //number
console.log(typeCheck(() => null)); //function
console.log(typeCheck({a: 1})); //object
console.log(typeCheck([1, 2, 3]));//array
console.log(typeCheck(new Set([1,2,3]))); //set