完美世界前端一面面经
1.css定位 哪几种定位 分别是相对于什么定位的
- 静态定位（static） 元素的默认定位，按照标准流特性摆放位置
- 相对定位（relative）元素在移动位置的时候是相对于它原来的位置来说的，原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式对待他，主要用于限制绝对定位
- 绝对定位（absolute）绝对定位的元素在移动位置的时候相对于最近一级有定位的祖先元素来说，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位，不再占有原先的位置，脱离标准流
- 固定定位（fixed）固定定位是元素固定于浏览器可视区的位置，以浏览器可视窗口为参照点移动元素，不再占有原来的位置，脱离标准流
- 粘性定位（sticky）以浏览器可视窗口为参照移动元素（固定定位的特点），占有原来的位置（相对定位的特点），必须加top left right bottom其中一个才有效
2.浮动会造成什么问题，怎么解决
浮动会导致父元素高度坍塌，浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。
解决方案：清除浮动
- 父级添加after伪元素或添加双伪元素（兼容IE还得添加一个.clearfix{*zoom:1}）：
.clearFloat:after {
content:"";
display:block;
height：0;
clear:both;
visibility:hidden;
} .clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after{
clear: both;
} - 额外标签法：在最后一个浮动元素后面添加块级元素
<div class = "clear"></div>
.clear{
clear:both;
} - 为父元素设置overflow属性
.father{
overflow:hidden;
} 3.怎么设置元素的层叠关系，有什么限制
z-index,限制是只有定位的盒子才有z-index属性
4.css选择器，怎么把135,246分别选出来
:nth-child()
选择列表中的偶数标签 :nth-child(2n)
选择列表中的奇数标签 :nth-child(2n-1)
5.读代码 文字会呈现什么颜色
<div id = "title">
<p>haha</p>
</div>
#title{
color：red；
}
p{
color：blue；
} 蓝色
6.了不了解transition
过渡，可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay ：定义过渡效果何时开始。
7.animation 大概怎么写
@keyframes animationName {
from {
properties: value;
}
percentage {
properties: value;
}
to {
properties: value;
}
}
// 或者
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
} - animationName：表示动画的名称；
- from：定义动画的开头，相当于 0%；
- percentage：定义动画的各个阶段，为百分比值，可以添加多个；
- to：定义动画的结尾，相当于 100%；
- properties：不同的样式属性名称，例如 color、left、width 等等。
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
} 8.为什么会造成跨域问题，有哪些解决方案，服务器要进行什么样的配置，jsonp为什么可以解决跨域，有什么限制
老八股了
9.数组去重的方式
利用Set()或Map()
let arr = [1,1,2,2,3,4,5,5,6] let res = [...new Set(arr)] console.log(res)
let arr = [1,1,2,2,3,4,5,5,6]
let map = new Map()
for (let i=0;i<arr.length;i++){
if(map.has(arr[i])){
map.set(arr[i],map.get(arr[i])+1)
}else{
map.set(arr[i],1)
}
}
console.log([...map.keys()]) 利用find()
let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.forEach(num=>{
if(!res.find(newNum=>newNum===num)){
res.push(num)
}
}) 利用some() let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.forEach(num=>{
if(!res.some(newNum=>newNum===num)){
res.push(num)
}
})
console.log(res) 利用indexOf() let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.forEach(num=>{
if(res.indexOf(num) === -1){
res.push(num)
}
})
console.log(res) 利用every()
let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.forEach(num=>{
if(res.every(newNum=>newNum !== num)){
res.push(num)
}
})
console.log(res) 利用filter() let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.forEach(num=>{
if(!res.filter(newNum=>newNum==num).length){
res.push(num)
}
})
console.log(res) 利用map() let arr = [1,1,2,2,3,4,5,5,6]
let res = []
arr.map(num=>{
if(!res.find(newNum=>newNum===num)){
res.push(num)
}
})
console.log(res)
10.数组排序 sort是根据什么排的 ，怎么升序排，怎么降序排
arr.sort([compareFunction])
默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。
如果指明了 compareFunction 参数 ，那么数组会按照调用该函数的返回值排序。
arr.sort((a,b)=>a-b) arr.sort((a,b)=>b-a)
11.怎么设置事件捕获，事件冒泡
element.addEventListener(event, function, useCapture)
省略或将第三参数设置为 false，将注册冒泡阶段的事件。
将第三参数参数设置为 true，将注册捕获阶段的事件。
将第三参数参数设置为 true，将注册捕获阶段的事件。
12.场景题 缓存策略 假如要设置一个100条数据的缓存，用什么数据结构去存比较合适
我自己想的是优先级队列，最小堆，面试官说性能不是很好，用双向链表实现。
感想：太久没看css了，把transition都答成transform了，感觉完美世界还是挺爱问css的，面试官也不是很会引导人，我都答错了也没提醒我，等我bb完他笑了我才突然想起来答错了，尴尬.... 面试体验一般般
#完美世界#
查看13道真题和解析
投递好未来等公司6个岗位