分享一套校招前端筆試題

我說我去面試了，你信不信？這是今日頭條的校招前端筆試題，若是侵權了，請聯繫我。

HTML

1. 針對移動瀏覽器端開發頁面，不指望用戶放大屏幕，且要求「視口（viewport）」寬度等於屏幕寬度，視口高度等於設備高度，如何設置？

2. data-xxx 屬性的做用是什麼？

3. 請描述一下cookies，sessionStorage和localStorage的區別？

4. 何時瀏覽器的標準模式（standards mode）和怪異模式（quirks mode）

CSS

1. 解釋一下box-model：所有屬性，各個屬性取值類型，範圍，計算值方式，負值做用，box-sizing概念。

2. BFC(Block Formatting Context)是什麼？有哪些應用？

3. 如何要求容器在寬度自由很縮的狀況下，A/B/C的寬度始終是1:1:1，如何實現，寫出兩種方法。

1. 如圖，A若寬高已知，如何實現水平、垂直均相對於父元素居中？若A高度未知呢？

JAVASCRIPT

1. 函數中的arguments是什麼？是數組嗎？若不是，如何將它轉化爲真正的數組？

2. 列舉JavaScript中typeof操做符的可能結果，如何區分：{}和[]類型？

3. Function中的call、apply、bind的區別是什麼？請針對每個寫出一個代碼示例。

4. 使用jQuery，找到id位selector的select標籤中有用data-target屬性爲isme的option的值？

5. 請優化下段代碼：

   for (var i = 0; i < document.getElementsByTagName('a').length; i++) {
        document.getElementsByTagName('a')[i].onmouseover = function () {
            this.style.color = 'red';
        }
        document.getElementsByTagName('a')[i].onmouseout = function () {
            this.style.color = '';
        }
    }

總結

整套題比較基礎，屬於初級工程師水平。

原文網址：http://yanhaijing.com/web/2016/09/14/a-fe-question-of-toutiao/