在上周，给大家分享了第一部分的面试题，得到了小伙伴们的好评，也希望小伙伴们能够好好利用我整理的面试题，早日找到一份自己满意的工作！
好了，闲话少说，接招吧~
11、android 4.x bug
1.三星 Galaxy S4中自带浏览器不支持border-radius缩写
2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分
3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色
4.android无法同时播放多音频audio
5.oppo 的border-radius 会失效
12、JS 判断设备来源
function deviceType(){
var ua = navigator.userAgent;
var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
for(var i=0; i<len,len = agent.length; i++){
if(ua.indexOf(agent[i])>0){
break;
}
}
}
deviceType();
window.addEventListener('resize', function(){
deviceType();
})
微信的 有些不太一样
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
13、audio元素和video元素在ios和andriod中无法自动播放
原因： 因为各大浏览器都为了节省流量，做出了优化，
在用户没有行为动作时（交互）不予许自动播放；
//音频，写法一
<audio src="music/bg.mp3" autoplay loop controls>
你的浏览器还不支持哦
</audio>
//音频，写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg，不支持在播放bg.mp3
</audio>
//JS绑定自动播放（操作window时，播放音乐）
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，
而在PC端Chrome是不会占据任何空间；
//3.注意不要遗漏微信的兼容处理需要引用微信JS；
14、css实现单行文本溢出显示 ...
直接上效果：相对于多行文本溢出做处理， 单行要简单多，且更容易理解。
实现方法
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
当然还需要加宽度width属来兼容部分浏览。
15、实现多行文本溢出显示...
效果：
实现方法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。
为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
如果你觉着这样还不够美观， 那么就接着往下看：
效果：
这样 是不是你想要的呢？
实现方法：
div {
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
div:after {
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
不要只顾着吃，要注意胃口，此方法有个弊端
那就是 【未超出行的情况下也会出现省略号】 ，这样会不会很挫！！！
没办法，只能结合JS 进行优化该方法了。
注：
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7
（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。
16、让图文不可复制
这点应该大家 都很熟悉了， 某些时候【你懂的】为了快捷搜索答案，可是打死也不让你复制
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
那有些网页为了尊重原创，复制的文本 都会被加上一段来源说明，是如何做到的呢？问的好！ 等的就是你这个问题 -_- 。
大致思路：
1、答案区域监听copy事件，并阻止这个事件的默认行为。
2、获取选中的内容（window.getSelection()）加上版权信息，
然后设置到剪切板（clipboarddata.setData()）。
17、盒子垂直水平居中
这个问题好像面试必问的！反正我是必问的，哈哈！！！ 其实无关多少种实现思路，只要你能实现就可以！
提供4种方法
1、定位 盒子宽高已知，
position: absolute;
left: 50%; top: 50%;
margin-left:-自身一半宽度;
margin-top: -自身一半高度;
2、table-cell布局
父级
display: table-cell;
vertical-align: middle;
子级
margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时；
（这里是本人常用方法）
position: relative / absolute;
/*top和left偏移各为50%*/
top: 50%;
left: 50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform: translate(-50%, -50%);
注意这里启动了3D硬件加速哦 会增加耗电量的
（至于何是3D加速 请看浏览器进程与线程篇）
4、flex 布局
父级：
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
再加一种水平方向上居中 ：
margin-left : 50% ;
transform: translateX(-50%);
18、改变placeholder的字体颜色大小
其实这个方法也就在PC端可以，真机上屁用都没有，当时我就哭了。 但 还是贴出来吧
input::-webkit-input-placeholder {
/* WebKit browsers */
font-size:14px;
color: #333;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size:14px;
color: #333;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size:14px;
color: #333;
}
19、最快捷的数组求最大值
var arr = [ 1,5,1,7,5,9];
Math.max(...arr) // 9
20、更短的数组去重写法
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
// [2, "12", 12, 1, 6, 13]
21、 vue 父子组件嵌套时，组件内部的各个生命周期钩子触发先后顺序
首先 我们可以把 子组件当做function函数来看待，当父组件 import 子组件的时候， 就当是声明了 并加载了这个函数，在调用的时候才会去执行这个函数（子组件）。
那么父子组件中的各个声明周期钩子触发的先后顺序是怎样的呢？
如下图：
上图带222 的 是为子组件，所以一次顺序是为 先创建父组件，然后才穿件子组件，当子组件创建完成并且实体dom挂载完成后父组件才挂载完成。
转载自微信