每日一题以及每日微课总结-CSDN博客

本文链接：https://blog.csdn.net/m0_46201220/article/details/109287563

每天的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，子级的处理还是一样。
代码：