为了账号安全,请及时绑定邮箱和手机立即绑定

提升 | 自问自答

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 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
5
获赞与收藏
78

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消