学习内容（一）

一、前端页面清除浮动

1、万能清除浮动法（after伪元素清除浮动）：

.clear：after{
		contet：' '；display：block；clear：both；hight：0；
		overflow：hidden；visibility：hidden；
}
.clear{
		*zoom: 1；
}

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout

2、父级元素添加声明：overflow：hidden
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3、after＋before双伪元素清除浮动：

.clear：after，.clear：before{
		content：' '；
		display：table；
}
.clear：after{
		clear：both；
}
.clear{
		*zoom：1；
}

二、画三角形 / 正方形

#item{
	/*三角形*/
	width：0；height：0；
	border-left：50px solid transparent；
	border-right：50px solid transparent；
	border-top：50px solid transparent；
	border-bottom：50px solid；
}

#item{
	/*正方形*/
	width：10vw；
	height：10vw；
	background：red；
}

三、垂直居中

1、flex

.item{
	display：flex；
	justify-content：conter；
	align-items：center；
}

2、利用position属性

.out{ position：relative；}
.in{
	width：10px；height：100px；
	position：absolute；
	top：0；right：0；left：0；bottom：0；
	margin：auto；
}

四、数组去重

1、Set

function test(arr){ return [...new Set(arr)] }

2、indexOf

function test(arr){
	var result = [];
	for(var i=0;i<arr.length;i++){
		if(result.indexOf(arr[i])===-1){
			result.push(arr[i])
		}
	}
	return result;
}

3、includes

function test(arr){
	var result = [];
	for(var i=0;i<arr.length;i++){
		if(!result.includes(arr[i])){
			result.push(arr[i])
		}
	}
	return result;
}

4、reduce
5、map

五、大小写转换

function test(arr){
	var result = arr.split(' ');
	var new_arr = arr.map((item)=>{
		return item === item.toUpperCase()?item.toLowerCase（）：item.toUpperCase（）；
	}）；
	return new_arr.join(' ');
}
console.log(test('AbC'))