2021-03-09 第1天

@[TOC](今天的面试题 (2019.04.17) —— 第1天)

[html] 页面导入样式时，使用link和@import有什么区别？

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

(4)link支持使用js控制DOM去改变样式，而@import不支持;

[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：

圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局：

优点：不需要添加dom节点

缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图：当middle部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形）

双飞翼布局：

优点：不会像圣杯布局那样变形

缺点是：多加了一层dom节点
参考:
https://www.jianshu.com/p/81ef7e7094e8
https://www.cnblogs.com/jiguiyan/p/11425276.html

[js] 用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

var arr = new Array(5); 
//首先创建一个长度为 5 的数组
var num = randomNumber();   //获取一个随机数 调用 randomNumber()方法获取
var i = 0;   //计数器
randomArr(arr,num);   //处理规则的函数方法

function randomArr(arr,num){
   if(arr.indexOf(num)<0){   //如果该随机数 arr 内没有的话,就将 arr 的第 i 个值设为该随机数 然后 i+1
       arr[i] = num;
       i++
   }else{
       num = randomNumber();   //如果随机数存在 就重新获取随机数
   }
   if(i>=arr.length){   //当 i 大于等于 arr 规定的长度的时候 就将 arr 打印出来 停止函数执行
       console.log(arr)
       return
   }else{
       randomArr(arr,num)   //否则就继续执行该函数规则
   }     
}

function randomNumber(){
   return Math.floor(Math.random()*31)+2   //Math.floor()取整  Math.random()会获取到 0-1 之间的任意随机数 不包含 0 和 1. 这里取乘数为 31 的原因也是因为取整后最大永远只会是 30
}