day01（link和@import区别、圣杯布局和双飞翼布局）_综合

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

1) 从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则；link除了加载CSS，还可以定义RSS等，而@import就只能加载CSS

2) 加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完之后再加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)

3）兼容性的区别：link是XHTML标签，无兼容问题；而@import是CSS2.1提供的，只有IE5以上才能支持

4）DOM可控性区别：link支持使用Javascript控制DOM去改变样式，由于DOM方法是基于文档的，所以无法使用@import方式改变样式。

具体可参考：https://xiangshuo.blog.csdn.net/article/details/52885924

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

相同：两者解决类似的问题。主要解决左右定宽，中间自适应的三栏布局（三栏都设置成左浮动，中间栏100%宽度，左右栏设置具体宽度），并且中间栏优先渲染（中间栏放在文档流前面让浏览器自上而下优先渲染）。

区别：为了不会造成中间的div的文字被旁边遮挡，圣杯布局采用的是父级div给 padding-left 和 padding-right 限制，让字不会被左边和右边挡住；双飞翼布局是采用给中间的div添加一个小div，这个小div使用外边距；

1）圣杯布局

原理：三栏利用 float 和负margin 并列，利用父容器设置 padding 给两边侧栏腾空间

中间栏左右设置padding，左栏margin-left -100%，然后position：relative;?left:-leftWidth;右栏margin-left:-rightWidth

代码：

    <div id="parents"><div id="top">这是Top!</div><div id="main"><div id="content">这是Content!</div><div id="left">这是Left!</div><div id="right">这是Right!</div></div><div id="foot">这是Foot!</div></div>

* {margin: 0;padding: 0;text-Align: center;
}#parents {width: 600px;border: 2px solid;margin: 0 auto;
}#main {padding-left: 100px;padding-right: 150px;overflow: hidden;
}#left,
#content,
#right {padding-bottom: 2000px;margin-bottom: -2000px;
}#content {background: #D6D6D6;float: left;width: 100%;
}#left {background: #E79F6D;float: left;width: 100px;position: relative;left: -100px;margin-left: -100%;
}#right {background: #77BBDD;float: left;width: 150px;margin-left: -150px;position: relative;left: 150px;
}#top {background: #666;height: 50px;
}#foot {background: #666;clear: both;height: 50px;
}

2）双飞翼布局

原理：三栏利用 float 和负margin 并列，在中间栏加一层容器，利用 margain 给两栏腾空间

代码：

    <div id="parents"><div id="top">这是Top!</div><div id="main"><div id="content"><div class="contain">中间内容区域</div></div><div id="left">这是Left!</div><div id="right">这是Right!</div></div><div id="foot">这是Foot!</div></div>

* {margin: 0;padding: 0;text-Align: center;
}#parents {border: 2px solid;margin: 0 auto;
}#main {min-width: 250px;overflow: hidden;
}#left,
#content,
#right {padding-bottom: 2000px;margin-bottom: -2000px;
}#content {background: #D6D6D6;float: left;width: 100%;
}#content .contain {background: red;margin: 0 150px 0 100px;
}#left {background: #E79F6D;float: left;width: 100px;margin-left: -100%;
}#right {background: #77BBDD;float: left;width: 150px;margin-left: -150px;
}#top {background: #666;height: 50px;
}#foot {background: #666;clear: both;height: 50px;
}

具体可参考：

https://lhammer.cn/You-need-to-know-css/#/zh-cn/holy-grail-layout?v=1
https://lhammer.cn/You-need-to-know-css/#/zh-cn/double-wing-layout?v=1

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

描述：

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。

      /** 初始化 arr* 数组的长度 length* 最小值 min* 最大值 max*/function randomArr(arr, length, min, max) {//   生成随机数var num = Math.floor(Math.random() * (max - min + 1)) + minif (!arr.includes(num)) {// 数组不存在该值arr.push(num)}// 递归进行return arr.length === length ? arr : randomArr(arr, length, min, max)}randomArr([], 5, 2, 32)