面试问题汇总

1.link和@import

link属于html标签，而@import是css提供的
当页面被加载的时候，link会跟着同步加载，而@import则是需要等到页面加载完成之后再去被加载
link是html标签，没有兼容性的问题，而@import只有ie5以上才能使用
link样式的权重要高于@import

2.css布局方式

传统的盒模型布局
- 文档流布局（块元素和行内元素）
- 浮动布局
- position定位布局
flex布局（弹性布局）
grid网格布局
table布局
- 可以实现水平垂直居中

3.垂直居中的方法

margin:auto方法
- position为absolute,设置上下左右距离为0，然后设置margin:auto
margin负值法：（transform）
- 设置top跟left为50%
- 设置position为absolute
- 设置transform：translateX(-50%)和translateY(-50%)
table布局
- 设置父元素display:table-cell
- 加入vertical-align:middle把此元素放到父元素的中部
flex布局
- align-items:center
- justify-content:center;

4.清除浮动

当容器高度为auto，然后容器中内容有浮动元素，容器高度不能自动被撑开，导致内容溢出到容器外部

在浮动元素后加上一个使用clear属性的空元素div.clear然后设置.clear{clear:both;}
给浮动元素的容器添加overflow:hidden添加overflow属性之后，浮动元素会回到容器层，把容器高度给撑起来，达到清除浮动的效果
在浮动元素后面的元素添加clear:both
使用:after伪元素，给浮动元素容器添加一个class，.clearfix，接着给这个class添加一个:after伪元素实现元素末尾添加了一个看不见的块元素
1
2
3
4
5
6
7
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

5.深浅拷贝

浅拷贝是指复制对象的时候，只对第一层键值进行独立的复制，如果对象有多层的话，就只复制嵌套层的地址

function shallowCopy(obj1, obj2) {
      for(var key in obj1) {
        obj2[key] = obj1[key]
      }
    }

深拷贝就是复制对象的时候完全的拷贝一个对象，两个对象毫不相干，因为这个是属于进入对象内部进行值的复制，而不是对内存地址的复制

具体实现就是通过if判断他是不是一个对象，如果是，那就在进行递归下到深的一层，直到不满足if条件，然后走到else里面，将值进行复制

function deepCopy(obj) {
      // 根据obj的类型判断是新建一个数组还是对象
      let newObj = Array.isArray(obj)? [] : {};
      // 判断传入的obj存在，且类型为对象
      if (obj && typeof obj === 'object') {
        for(key in obj) {
          // 如果obj的子元素是对象，则进行递归操作
          if(obj[key] && typeof obj[key] ==='object') {
            newObj[key] = deepCopy(obj[key])
          } else {
          // // 如果obj的子元素不是对象，则直接赋值
            newObj[key] = obj[key]
          }
        }
      }
      return newObj // 返回新对象
    }