前端3+1（7.16）

题库：前端3+1
第一天：

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

区别：
1.关系：link是html标签（不仅可以加载css，还可以定义RSS、rel），@import是css提供的
2.加载顺序：页面加载时，link引入的样式会被同时加载；而@import引用的Css会等页面加载完再加载
3.兼容性：@import只有IE5以上才能被识别，而link无兼容问题。
4.DOM可控性：通过js操作DOM，可以插入link标签来改变样式；由于dom方法是基于文档的，无法使用@import方式插入样式。
5.两者权重：在link标签引入的 CSS 文件中使用@import时，相同样式将被该 CSS 文件本身的样式层叠。
css权重：!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

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

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
 区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，
 margin-left：-100%;及margin-left:-100px;以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置，不用相对定位。

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

Math.floor：返回小于或等于一个给定数字的最大整数，向下取整；
Math.random（） 返回一个0~1之间的数
array.indexOf（）返回第一次出现的下标，没有出现返回-1
思路：
如果数组满了五个就返回数组
没找到就push
不管哪种情况都要递归调用函数

    let array = [];
    function getRandom(min, max) {
        //取随机数函数，
        let number = Math.floor(Math.random() * (max - min + 1)) + min;
        return number
    }
    function createArray() {
        if (array.length == 5) return array
        const randomNum = this.getRandom(2, 32)
        if (array.indexOf(randomNum) == -1) array.push(randomNum)
        return this.createArray()
    }