提升 | 自问自答
1、页面导入样式时，使用link和@import有什么区别？
写法：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <style> @import url(style.css); </style>
@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；
@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；
@import需要页面网页完全载入以后加载。
// 所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
区别3：link是XHTML标签，无兼容问题；
@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；
@import不支持。
2、圣杯布局和双飞翼布局的理解和区别，并用代码实现。
两边固定宽度，中间自适应的三栏布局，并且中间栏优先渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局和双飞翼布局</title>
</head>
<body>
/*三栏利用 float 和 负margin 并列 ; 利用父容器设置 padding 给两边侧栏腾空间*/
<div class="sbbox">
<div id="hd">header</div>
<div id="bd">
<div id="middle">圣杯middle</div>
<div id="left">圣杯left</div>
<div id="right">圣杯right</div>
</div>
<div id="footer">footer</div>
</div>
<style>
.sbbox #hd{ height:50px; background: #000; text-align: center;}
.sbbox #bd{ padding:0 200px 0 180px; height:100px;}
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
.sbbox #middle{ float:left; width:100%; height:100px; background:#df0;}
/*左栏上去到第一行*/
.sbbox #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0f2; position:relative; left:-180px;}
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
.sbbox #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0f2; position:relative; right:-200px;}
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
.sbbox #footer{ height:50px; background: #000; text-align: center;}
</style>
/*三栏利用 float 和 负margin 并列 ; 在中间栏加一层容器，利用 margain 给两栏腾空间*/
<div class="sfybox">
<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>
</div>
<style>
.sfybox #hd{ height:50px; background: #666; text-align: center;}
.sfybox #middle{ float:left; width:100%; height:100px; background:blue;}/*左栏上去到第一行*/
.sfybox #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9;}
.sfybox #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9;}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
.sfybox #inside{ margin:0 200px 0 180px; height:100px;}
.sfybox #footer{ clear:both; height:50px; background: #666; text-align: center; }
</style>
/*flex大法！！！*/
<div class="flexbox">
<div id="left">flex/left</div>
<div id="middle">flex/middle</div>
<div id="right">flex/right</div>
</div>
<style>
.flexbox{display: flex;}
.flexbox #middle{flex: 1; background: #0cc;}
.flexbox #left{padding: 0 0 100px; background: #dc2;}
.flexbox #right{padding: 100px 0 0; background: #f0c;}
</style>
</body>
</html>3、用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
Math.random() 这个函数可以生成 [0,1) 的一个随机数。
floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。
includes() 方法用来判断一个数组是否包含一个指定的值
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
function buildArray(arr, length, min, max) {
var num = Math.floor(Math.random() * (max - min)) + min; /*随机数*/
if (!arr.includes(num)) { arr.push(num); }
return arr.length === length ? arr : buildArray(arr, length, min, max);
}
var result = buildArray([], 5, 5, 32);
console.table(result);点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦