1.页面导入样式时，使用link和@import有什么区别？
（1）link是html标签，@import是css提供的,必须在<style></style>中使用
（2）link引入的样式页面加载的同时加载，@import引入的样式需要等页面加载完成后再加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
（3）link没有兼容性问题，@import不兼容ie5以下
（4）link可以通过js操作DOM动态引入样式表改变样式，而@import不可以
2.在html设计制作中，css有哪四种引入方式？
内联样式，<div style="display: none;background:red"></div>
嵌入样式，嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
链接样式，<link rel="stylesheet" type="text/css" href="style.css">
导入样式，<style>@import url(style.css);</style>
3. 圣杯布局和双飞翼布局的理解和区别，并用代码实现
圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
双飞翼布局：
<body>
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>
<style>
#hd{
height:50px;
background: #666;
text-align: center;
}
#middle{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
#footer{
clear:both; /*记得清楚浮动*/
height:50px;
background: #666;
text-align: center;
}
</style>
圣杯布局：
<body>
<div class="wrapper1">
<div class="main">
<p>bilibili</p>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper1 {
padding: 0 60px 0 130px;
}
.wrapper1 .main {
float: left;
width: 100%;
height: 300px;
background: red;
}
.wrapper1 .left {
float: left;
width: 130px;
margin-left: -100%;
background: blue;
height: 100px;
position: relative;
right: 130px;
}
.wrapper1 .right {
float: left;
width: 60px;
margin-left: -60px;
background: yellow;
height: 200px;
position: relative;
left: 60px;
}
</style>
4.这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。
var arr = []; //数组
var num = 2 + Math.floor(Math.random() * 30); //生成 2-32 内的随机数
var n = 0; //记录数回调次数
var setArr = function(num){ //生成数组长度为5且元素的随机数在2-32间不重复的值
if(arr.length === 5){ //数组长度为5便跳出循环
return console.log(arr);
}
if(arr.every((v) => (v !== num))){ //判断数组中是否没有该值
arr.push(num);
}
n++;
setArr (Math.floor(Math.random()*(31)+2));
}
setArr (num);
