GitHub题目答案及扩展

前端面试题，3+1模式，主要是每天督促自己，多积累一些基础知识。
GitHub题目地址：https://github.com/haizlin/fe-interview

第1天：

[html] 页面导入样式时，使用link和@import有什么区别？
答案：
   * link为XHTML标签，除了加载css外，还可以定义RSS等其他事务，@import为css标签，只能加载css文件
   * link不存在兼容性问题，而@import是css2.1提出的，低版本的浏览器可能不支持
   * 可通过js创建link标签，从而修改元素属性，但js无法操作@import
   * 在页面加载过程中，遇到link标签会立即解析，但@import标签需等页面加载完成
[css] 圣杯布局和双飞翼布局的理解和区别，并用代码实现
答案：https://www.jianshu.com/p/089b1512bb66

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值
代码行数不超过15行，时间不超过10分钟

let arr = [];
function generate() {
    if (arr.length < 5) {
        let randomNumber = Math.ceil(Math.random() * 30 + 2);

        if (arr.indexOf(randomNumber) > -1) {
            generate();
        } else {
            arr.push(randomNumber);
            generate();
        }
    }
}
generate();
console.log(arr);

第2天：
写一个方法去掉字符串中的空格

function trim(str, type) {
    let map = {
        left: /^\s+/g,
        right: /\s+$/g,
        both: /^\s+|\s+$/g,
        all: /\s+/g
    };
    // 默认情况下，删除所有空格
    let reg = type && map[type] ? map[type] : map.all;
    let result = str.replace(reg, '');

    if (type === 'middle') {
        // 获取左边空格
        let left = str.match(map.left)[0];
        // 获取右边空格
        let right = str.match(map.right)[0];
        result = left + result + right;
    }

    return result;
}

第3天：

[css] 在页面上隐藏元素的方法有哪些？

  - display: none -> 元素不占据页面位置
  - visibility: hidden -> 元素在页面中占据位置，但不可见
  - opacity: 0 -> 透明度为0
   - 利用position的absolute和relative，再结合left和top等属性
   - transform: rotateX(90deg) / rotateY(90deg) / scale(0)

  针对文本节点：
  - font-size: 0
  - text-indent: 大值

[js] 去除字符串中最后一个指定的字符

function deleteChar(str, char) {
    if (!str || !char) {
        alert('传入的字符不合法');
    }
    let index = str.lastIndexOf(char);
    if (index > -1) {
        return str.substring(0, index) + str.substring(index+1); 
    }
    return str;
}

这里主要考察字符串相关一些方法。

str.length：获取字符串长度
获取某个字符：
str.charAt(number) ：获取索引为number的字符
str.charCodeAt(number)：获取索引为number的ASCII码
str[number]：含义与str.charAt(number)相同

截取字符串：(均不改变原始字符串)

str.substr(start， length)，若start为负值，则从末尾开始数
str.substring(start, end?)，不包含end的字符串；有负数直接转为0；无end，则默认到字符串结束；end值小于start值，则自动交换位置
str.slice(start, end?)：有负数表示从字符串末尾开始，-1表示最后一位，无end，默认到字符串结束
与正则相关：
1）str.replace(substr / RegExp, str)：
它将在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

2）str.search(substr / RegExp)：
str中第一个与 regexp 相匹配的子串的起始位置。
search() 方法不执行全局匹配，它将忽略标志 g。它同时忽略 regexp 的 lastIndex 属性，并且总是从字符串的开始进行检索，这意味着它总是返回 stringObject 的第一个匹配的位置。

3）str.match(RegExp)：

image.png

说明：若正则表达式中无g，则无论执行多少次match，都只匹配首次出现的子串，返回结果为类数组。matches[0]为匹配项，matches[1]为捕获组1，依次类推。

image.png

如果正则中有g，则返回所有的匹配项。

第4天

[html] HTML5的文件离线储存怎么使用，工作原理是什么？
[css] CSS选择器有哪些？哪些属性可以继承？
CSS选择器：
   通配符*
   id #container
   class .container
   标签名 div
   相邻兄弟节点 +
   直接子代元素 >
   子孙元素 div p
   伪类 :firstChild
   伪元素::after ::before
可以继承的属性：
字体系列
文本系列

伪类扩展：

:first-of-type // 表示一组兄弟元素中其类型的第一个元素，而不管其在兄弟节点中的位置如何
DOM结构：

<div>
    <h1>HEAD1</h1>
    <p>第一个P元素</p>
    <p>第二个P元素</p>
    <p>第三个P元素</p>
    <p>第四个P元素</p>
</div>

style样式：

p:first-of-type {
        color: #f00;
 }

image.png

<div>
        <p>第一个P元素<em>p里面的em元素</em></p>
        <em>第二个em元素</em>
</div>
div em:first-of-type {
            color: #f00;
}

image.png

:last-of-type // 表示一组兄弟节点中某类型的最后一个元素

如果写成parentNode ele:first-of-type的格式，则选中的元素既包括父元素的子元素的最后一个选定类别的元素，也包括子元素最后一个选定类别的元素，依次类推
DOM结构和样式表：

<p>
        <em>我没有颜色 :(</em><br>
        <span><em>我有颜色!</em></span><br>
        <strong>我没有颜色 :(</strong><br>
        <em>我有颜色 :D</em><br>
        <span>
            <em>我在子元素里，但没有颜色!</em><br>
            <span style="text-decoration:line-through;">我没有颜</span> 
            <br>
            <em>我却有颜色！</em><br>
        </span>
        <br>
        <strong>我也没有颜色 :(</strong>
</p>
p em:last-of-type {
    color: #8470FF;
}

image.png

3）:nth-of-type(an+b)

<div>
        <div>这段不参与计数。</div>
        <p>这是第一段。</p>
        <p>这是第二段。</p>
        <div>这段不参与计数。</div>
        <p>这是第三段。</p>
        <p>这是第四段。</p>
</div>
<style>
  div p:nth-of-type(2n + 1) {
      color: #f00;
  }
  div p:nth-of-type(2n) {
      color: #8B864E;
  }
</style>

image.png

4）:nth-last-of-type(an+b) 与:nth-of-type的用法类似，只是这个倒序计数
5）:nth-child(an + b)::nth-child(an+b)这个 [CSS 伪类]首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为第（an+b）个元素的集合（n=0，1，2，3...（从1开始计数）

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素
6）:nth-last-child(an + b): 与nth-child(an + b)的功能类似，只是该方法倒序计数
7）:first-child表示一组兄弟节点中的第一个

<div>
      <p>This text is selected!</p>
      <p>This text isn't selected.</p>
    </div>

    <div>
      <h2>This text isn't selected: it's not a `p`.</h2>
      <p>This text isn't selected.</p>
</div>
<style>
p:first-child {
    color: #FFD700;
}
</style>

image.png

8）:last-child 父元素的最后一个子元素
9）:only-child父元素的唯一子元素(可一直追溯到子元素的子元素)-->等价于:first-child:last-child / :nth-child(1):nth-last-child(1)

<main>
      <div>
        <i>I am a lonely only child.</i>
      </div>

      <div>
        <i>I have siblings.</i><br>
        <b>So do I!</b><br>
        <span>I also have siblings, <span>but this is an only child.</span></span>
      </div>
</main>
<style>
  main :only-child {
    color: #f00;
  }
</style>

image.png

10）:only-of-type 在所有的子元素中，只选中唯一类型的元素，而不管该元素有多少个兄弟节点。

<main id="main">
      <div>I am `div` #1.</div>
      <p>I am the only `p` among my siblings.</p>
      <div>I am `div` #2.</div>
      <div>I am `div` #3.
        <i>I am the only `i` child.</i>
        <em>I am `em` #1.</em>
        <em>I am `em` #2.</em>
      </div>
</main>
<style>
  #main :only-of-type {
    color: #0f0;
  }
</style>

image.png

11）关于a链接 :link :visited :hover :active这四个属性的定义顺序为：Love Hate

        a:link {
            color: #FFD39B;
        }
        a:visited {
            color: #FF6A6A;
        }

        a:hover {
            color: #FFC1C1;
        }
        a:active {
            color: #DAA520;
        }

定义顺序不对，可能会导致:active伪类失效

12）:focus当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发

伪元素扩展：

::before: {
}
::after {
}
// selection支持的元素：color  、background-color 、cursor 、caret-color(插入光标的颜色)、outline 、 text-decoration 、text-emphasis-color、text-shadow 
// 参考：[https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection)

::selection {
  background-color: cyan;
}
// 首行
::first-line {
}
// 首个字符（中文或者应为）
::first-letter {
}

[js] 写一个方法把下划线命名转成大驼峰命名

第5天

[html] 简述超链接target属性的取值和作用
- _blank：在浏览器新的标签页打开一个页面
- _parent：用于框架集或者iframe，在a链接所在页面的父窗口中载入a链接的页面
- _self：在当前窗口载入a链接的页面
- _top：用于框架集或者iframe，在顶级窗口中载入a链接页面
  _top和_parent 在框架集中跟top 、parent指向的窗口的含义一致
[css] CSS3新增伪类有哪些并简要描述
答案见第4天
[js] 写一个把字符串大小写切换的方法

function convertCase(str) {
    if (!str || (typeof str !== 'string')) {
        alert('请输入正确的字符串');
        return;
    }
    for (var i = 0, len = str.length; i < len; i++) {
        str = str.replace(str[i], str[i].search(/[a-z]/) > -1 ? str[i].toUpperCase() : str[i].toLowerCase());
    }
}
// 使用了字符串的全局匹配
function convertCase(str) {
    return str.replace(/([a-z]*)([A-Z]*)/g, function (m, $1, $2) {
        return $1.toUpperCase() + $2.toLowerCase();
    });
}

还可通过比较ASCII值来确定输入值是小写还是大写，但个人感觉不是很妥，还得需要记住ASCII值的大小。

第6天

[html] label都有哪些作用？并举相应的例子说明
- 主要用于绑定文本和表单元素
- 两种用法：
- <label for="username"></label><input type="text" id="username" class="username"> 或者 <label><input type="text" class="username"></label>
[css] 用css创建一个三角形，并简述原理
[js] 写一个去除制表符和换行符的方法

第7天

[html] iframe框架都有哪些优缺点？
[css] 简述你对BFC规范的理解
BFC是block-formatting-context，翻译过来就是块格式化上下文。它规定了块级元素在页面中的定位方式。它是页面中一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的生成：
- 根元素
- float的值不为none（left / right）
- overflow的值不为visible （hidden / scroll / auto）
- display的值为inline-block、table-cell、table-caption
- position为非relative和static （absolute / fixed / sticky）
BFC的作用：
- 阻止margin塌陷
- 阻止浮动元素被块元素覆盖
- 阻止父元素高度塌陷（如果两个子元素都有float属性，则父元素高度会变为0）
- 自适应两栏或多栏布局
  可参考：1）https://juejin.im/entry/59c3713a518825396f4f6969
  2）https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
  延伸 Inline formatting context(简称IFC)， G（grid）FC和F(flex)FC
[js] 统计某一字符或字符串在另一个字符串中出现的次数
个人写的比较挫的代码

function count(str, target) {
  var reg = new RegExp(target, 'g');
  var count = 0;
  while(reg.test(str)) {
    count++
  }
  return count;
}

GitHub上别人的代码：

// 1
function count(str, target) {
  var reg = new RegExp(target, 'g');
  return str.match(reg).length;
}
// 2
function count(str, target) {
  return str.split(target).length - 1;
}

第8天

最后编辑于：2019.08.23 13:15:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,179评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,229评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,032评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,533评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,531评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,539评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,916评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,813评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,568评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,654评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,354评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,937评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,918评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,152评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,852评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,378评论 2赞 342

GitHub题目答案及扩展

推荐阅读更多精彩内容