1 如何让div快速居中
flex + marigin: auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
html,body {
width: 100%;
height: 100%;
}
body {
display: flex;
}
.con {
width: 200px;
height: 200px;
background-color: pink;
margin: auto;
}
</style>
</head>
<body>
<div class="con"></div>
</body>
</html>
2 padding 与 margin不同
作用对象不同，padding是针对自身的，margin是作用于外部对象的
3 vw与百分比区别
百分比有继承关系，会继承父级的宽；
vw只和视口宽度有关系
4 行内元素和块级元素的区别
行内元素不换行，宽高由内容决定
块级元素独占一行，宽继承自父级
5 如何让谷歌浏览器支持小字体(比如谷歌最小支持12px，如何变成6px)
transform: scale(0.5)
6 let与var
var的缺陷： 声明提升，没有局部作用域，声明覆盖，
let正好弥补上述缺陷；
console.log(name) //lisi 声明提升
var name = 'zs'
function fn() {
for(var i =0; i< 3; i++) {
}
console.log(i) //3 没有局部作用域
}
fn()
var name = 'lisi'
console.log(name) // lisi 声明覆盖
7 深拷贝（针对引用数据类型，数组或对象）
深拷贝以下数组：
const list = [
{id: 1, name: 'zs1', age: 18},
{id: 2, name: 'zs2', age: 18},
{id: 3, name: 'zs3', age: 18},
function() {console.log(1)}
]
第一种方法：JSON.parse(JSON.stringify(list))
const newList = JSON.parse(JSON.stringify(list));
缺陷： 无法拷贝function函数
第二种方法：
function deepCopy(source) {
const targetObj = source.constructor === Array ? [] : {}
for(let key in source) {
if (source.hasOwnProperty(key)) {
const value = source[key]
if (value && typeof value === 'object') {
// 下面一行代码为维护性代码
// targetObj[key] = value.constructor === Array ? [] : {}
// 引用数据类型，递归
targetObj[key] = deepCopy(value)
} else {
// 基本数据类型，直接赋值
targetObj[key] = value
}
}
}
return targetObj
}
Array.prototype.pppp = 'ppppp'
const list = [
{id: 1, name: 'zs1', age: 18},
{id: 2, name: 'zs2', age: 18},
{id: 3, name: 'zs3', age: 18},
function() {console.log(1)}
]
const newList = deepCopy(list)
newList.push({id: 888})
console.log(list)
console.log(newList)
