前端面試題建峭，3+1模式囤耳，主要是每天督促自己捏顺，多積累一些基礎(chǔ)知識。
GitHub題目地址：https://github.com/haizlin/fe-interview

第1天：

• [html] 頁面導(dǎo)入樣式時(shí)椿浓，使用link和@import有什么區(qū)別太援？
  答案：
  ?? * link為XHTML標(biāo)簽，除了加載css外扳碍，還可以定義RSS等其他事務(wù)提岔，@import為css標(biāo)簽，只能加載css文件
  ?? * link不存在兼容性問題笋敞，而@import是css2.1提出的碱蒙，低版本的瀏覽器可能不支持
  ?? * 可通過js創(chuàng)建link標(biāo)簽，從而修改元素屬性夯巷，但js無法操作@import
  ?? * 在頁面加載過程中赛惩，遇到link標(biāo)簽會立即解析，但@import標(biāo)簽需等頁面加載完成

• [css] 圣杯布局和雙飛翼布局的理解和區(qū)別鞭莽，并用代碼實(shí)現(xiàn)
  答案：http://www.reibang.com/p/089b1512bb66

• 用遞歸算法實(shí)現(xiàn)坊秸，數(shù)組長度為5且元素的隨機(jī)數(shù)在2-32間不重復(fù)的值
  代碼行數(shù)不超過15行，時(shí)間不超過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天：
寫一個(gè)方法去掉字符串中的空格

function trim(str, type) {
    let map = {
        left: /^\s+/g,
        right: /\s+$/g,
        both: /^\s+|\s+$/g,
        all: /\s+/g
    };
    // 默認(rèn)情況下澎怒，刪除所有空格
    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 -> 元素不占據(jù)頁面位置
??- visibility: hidden -> 元素在頁面中占據(jù)位置阶牍，但不可見
??- opacity: 0 -> 透明度為0
?? - 利用position的absolute和relative喷面，再結(jié)合left和top等屬性
?? - transform: rotateX(90deg) / rotateY(90deg) / scale(0)

??針對文本節(jié)點(diǎn)：
??- font-size: 0
??- text-indent: 大值

• [js] 去除字符串中最后一個(gè)指定的字符

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;
}

這里主要考察字符串相關(guān)一些方法。

• str.length：獲取字符串長度
  獲取某個(gè)字符：
• str.charAt(number) ：獲取索引為number的字符
• str.charCodeAt(number)：獲取索引為number的ASCII碼
• str[number]：含義與str.charAt(number)相同

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

• str.substr(start走孽， length)惧辈，若start為負(fù)值，則從末尾開始數(shù)

• str.substring(start, end?)磕瓷，不包含end的字符串盒齿；有負(fù)數(shù)直接轉(zhuǎn)為0念逞；無end，則默認(rèn)到字符串結(jié)束边翁；end值小于start值翎承，則自動(dòng)交換位置

• str.slice(start, end?)：有負(fù)數(shù)表示從字符串末尾開始，-1表示最后一位符匾，無end叨咖，默認(rèn)到字符串結(jié)束
  與正則相關(guān)：
  1）str.replace(substr / RegExp, str)：
  ???它將在 stringObject 中查找與 regexp 相匹配的子字符串，然后用 replacement 來替換這些子串啊胶。如果 regexp 具有全局標(biāo)志 g甸各，那么 replace() 方法將替換所有匹配的子串。否則焰坪，它只替換第一個(gè)匹配子串趣倾。

  2）str.search(substr / RegExp)：
  ???str中第一個(gè)與 regexp 相匹配的子串的起始位置。
  ???search() 方法不執(zhí)行全局匹配某饰，它將忽略標(biāo)志 g儒恋。它同時(shí)忽略 regexp 的 lastIndex 屬性，并且總是從字符串的開始進(jìn)行檢索露乏，這意味著它總是返回 stringObject 的第一個(gè)匹配的位置碧浊。

3）str.match(RegExp)：

image.png

說明：若正則表達(dá)式中無g，則無論執(zhí)行多少次match瘟仿，都只匹配首次出現(xiàn)的子串箱锐，返回結(jié)果為類數(shù)組。matches[0]為匹配項(xiàng)劳较，matches[1]為捕獲組1驹止，依次類推。

image.png

如果正則中有g(shù)观蜗，則返回所有的匹配項(xiàng)臊恋。

第4天

• [html] HTML5的文件離線儲存怎么使用，工作原理是什么墓捻？

• [css] CSS選擇器有哪些抖仅？哪些屬性可以繼承？
  CSS選擇器：
  ???通配符*
  ???id #container
  ???class .container
  ???標(biāo)簽名 div
  ???相鄰兄弟節(jié)點(diǎn) +
  ???直接子代元素 >
  ???子孫元素 div p
  ???偽類 :firstChild
  ???偽元素::after ::before
  可以繼承的屬性：
  字體系列
  文本系列

偽類擴(kuò)展：

1. :first-of-type // 表示一組兄弟元素中其類型的第一個(gè)元素砖第，而不管其在兄弟節(jié)點(diǎn)中的位置如何
   DOM結(jié)構(gòu)：

<div>
    <h1>HEAD1</h1>
    <p>第一個(gè)P元素</p>
    <p>第二個(gè)P元素</p>
    <p>第三個(gè)P元素</p>
    <p>第四個(gè)P元素</p>
</div>

style樣式：

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

image.png

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

image.png

2. :last-of-type // 表示一組兄弟節(jié)點(diǎn)中某類型的最后一個(gè)元素

如果寫成parentNode ele:first-of-type的格式撤卢，則選中的元素既包括父元素的子元素的最后一個(gè)選定類別的元素，也包括子元素最后一個(gè)選定類別的元素梧兼，依次類推
DOM結(jié)構(gòu)和樣式表：

<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>這段不參與計(jì)數(shù)羽杰。</div>
        <p>這是第一段渡紫。</p>
        <p>這是第二段到推。</p>
        <div>這段不參與計(jì)數(shù)。</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

• 0n+3 或簡單的 3 匹配第三個(gè)元素。
• 1n+0 或簡單的 n 匹配每個(gè)元素唆阿。（兼容性提醒：在 Android 瀏覽器 4.3 以下的版本 n 和 1n 的匹配方式不一致益涧。1n 和 1n+0 是一致的，可根據(jù)喜好任選其一來使用驯鳖。）
• 2n+0 或簡單的 2n 匹配位置為 2闲询、4、6浅辙、8...的元素（n=0時(shí)扭弧，2n+0=0，第0個(gè)元素不存在记舆，因?yàn)槭菑?開始排序)鸽捻。你可以使用關(guān)鍵字 even 來替換此表達(dá)式。
• 2n+1 匹配位置為 1泽腮、3御蒲、5、7...的元素诊赊。你可以使用關(guān)鍵字 odd 來替換此表達(dá)式厚满。
• 3n+4 匹配位置為 4、7碧磅、10碘箍、13...的元素
  6）:nth-last-child(an + b): 與nth-child(an + b)的功能類似，只是該方法倒序計(jì)數(shù)
  7）:first-child表示一組兄弟節(jié)點(diǎn)中的第一個(gè)

<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

<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 在所有的子元素中鲸郊，只選中唯一類型的元素敲街，而不管該元素有多少個(gè)兄弟節(jié)點(diǎn)。

<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）關(guān)于a鏈接 :link :visited :hover :active這四個(gè)屬性的定義順序?yàn)椋篖ove Hate

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

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

定義順序不對严望，可能會導(dǎo)致:active偽類失效

12）:focus當(dāng)用戶點(diǎn)擊或觸摸元素或通過鍵盤的 “tab” 鍵選擇它時(shí)會被觸發(fā)

偽元素?cái)U(kuò)展：

::before: {
}
::after {
}
// selection支持的元素：color  、background-color 逻恐、cursor 像吻、caret-color(插入光標(biāo)的顏色)峻黍、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 {
}
// 首個(gè)字符（中文或者應(yīng)為）
::first-letter {
}

• [js] 寫一個(gè)方法把下劃線命名轉(zhuǎn)成大駝峰命名

第5天

• [html] 簡述超鏈接target屬性的取值和作用
  • _blank：在瀏覽器新的標(biāo)簽頁打開一個(gè)頁面
  • _parent：用于框架集或者iframe，在a鏈接所在頁面的父窗口中載入a鏈接的頁面
  • _self：在當(dāng)前窗口載入a鏈接的頁面
  • _top：用于框架集或者iframe惭每，在頂級窗口中載入a鏈接頁面
    _top和_parent 在框架集中跟top 骨饿、parent指向的窗口的含義一致
• [css] CSS3新增偽類有哪些并簡要描述
  答案見第4天
• [js] 寫一個(gè)把字符串大小寫切換的方法

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值來確定輸入值是小寫還是大寫，但個(gè)人感覺不是很妥台腥，還得需要記住ASCII值的大小宏赘。

第6天

• [html] label都有哪些作用？并舉相應(yīng)的例子說明
  • 主要用于綁定文本和表單元素
  • 兩種用法：
  • <label for="username"></label><input type="text" id="username" class="username"> 或者 <label><input type="text" class="username"></label>
• [css] 用css創(chuàng)建一個(gè)三角形黎侈，并簡述原理
• [js] 寫一個(gè)去除制表符和換行符的方法

第7天

• [html] iframe框架都有哪些優(yōu)缺點(diǎn)察署？

• [css] 簡述你對BFC規(guī)范的理解
  ??BFC是block-formatting-context，翻譯過來就是塊格式化上下文峻汉。它規(guī)定了塊級元素在頁面中的定位方式贴汪。它是頁面中一個(gè)獨(dú)立的渲染區(qū)域，只有Block-level box參與休吠， 它規(guī)定了內(nèi)部的Block-level Box如何布局扳埂，并且與這個(gè)區(qū)域外部毫不相干。
  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塌陷
  • 阻止浮動(dòng)元素被塊元素覆蓋
  • 阻止父元素高度塌陷（如果兩個(gè)子元素都有float屬性，則父元素高度會變?yōu)?）
  • 自適應(yīng)兩欄或多欄布局
    可參考：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] 統(tǒng)計(jì)某一字符或字符串在另一個(gè)字符串中出現(xiàn)的次數(shù)
  個(gè)人寫的比較挫的代碼

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天

• [html] 簡述下html5的離線儲存原理希太，同時(shí)說明如何使用？
• [css] 清除浮動(dòng)的方式有哪些及優(yōu)缺點(diǎn)酝蜒？
• [js] 寫一個(gè)加密字符串的方法