每天的js基础习题总结
2020-10-26
输出结果:
分析与联想:这道题目考查的是数组以及数组中的join方法。声明部分,说明一下第一个数组a,这是通过new来进行生成,这样生成通常有两种形式,第一种就是现在这样,这样数组当中时没有值的,只是有三位,都是undefined,第二种是有多个值,如下:
输出部分:先看前三个,需要记住的是undefined,null都是当成是空串进行处理,所以说相当于:
所以说前三个打印的都是–,而后两个正常进行join,即每两个之间通过-进行连接,所以说结果就是上面展示的一样。演示结果如下:
2020-10-26(圣杯以及双飞翼布局)
解释:我们无论是利用圣杯布局还是双飞翼布局都是为了实现这样的效果。
基本样式结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.bottom {
height: 200px;
background-color: #caf;
}
.content>div {
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.main {
height: 200px;
background-color: #fac;
width: 100%;
}
.left {
height: 200px;
width: 200px;
background-color: #acf;
/* margin-left: -200px; */
margin-left: -100%;
}
.right {
width: 100px;
height: 200px;
background-color: lightblue;
margin-left: -100px;
}
</style>
</head>
<body>
<!-- 最基本的布局 -->
<div class="header">头部</div>
<div class="content clearfix">
<div class="main">主内容区</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="bottom">底部</div>
</body>
</html>
圣杯布局
核心思想:圣杯布局的核心思想是给1.父级设置一个padding-left以及padding-right,这样可以空出左面区域以及右面区域的位置,2.为左面以及右面的区域设置相对定位。
代码:
实现效果:
双飞翼布局:
核心思想:双飞翼布局的核心思想是为父级设置一个margin-left,margin-right,类似于上面的圣杯布局设置了padding,子级的处理还是一样。
代码:
2020-10-27(关于原型)