完美世界前端一面面经

• 静态定位（static） 元素的默认定位，按照标准流特性摆放位置
• 相对定位（relative）元素在移动位置的时候是相对于它原来的位置来说的，原来在标准流中的位置继续占有，后面的盒子仍然以标准流的方式对待他，主要用于限制绝对定位
• 绝对定位（absolute）绝对定位的元素在移动位置的时候相对于最近一级有定位的祖先元素来说，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位，不再占有原先的位置，脱离标准流
• 固定定位（fixed）固定定位是元素固定于浏览器可视区的位置，以浏览器可视窗口为参照点移动元素，不再占有原来的位置，脱离标准流
• 粘性定位（sticky）以浏览器可视窗口为参照移动元素（固定定位的特点），占有原来的位置（相对定位的特点），必须加top left right bottom其中一个才有效

• 父级添加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;
}

<div id = "title">
    <p>haha</p>
</div>
#title{
     color：red；
}
p{
     color：blue；
}

@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;} 
}

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()])

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)
    }
})

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)

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)

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)

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)

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)

arr.sort((a,b)=>a-b)
arr.sort((a,b)=>b-a)