前端面試試題收集

時間 2019-11-16

原文原文鏈接

本文僅記錄本人學習知識，文章出現的題目都是轉載網絡的。互相學習，一塊兒成長！

1. css常見結構佈局

全背景下等寬內容居中
絕對底部
水平垂直居中
聖盃佈局 (兩邊等寬，中間自適應的三欄佈局)
雙飛翼佈局 (兩邊等寬，中間自適應的三欄佈局)
類訂單佈局 (爲左側高度不固定，右側自適應高度而且居中)
Flex 佈局

2.用遞歸算法實現，數組長度爲5且元素的隨機數在2-32間不重複的值。

var arr = new Array(5);
function insertRandom(n) {
  if (n < 0) return
  let tmp = Math.floor(Math.random() * 31 + 2)
  if (arr.indexOf(tmp) !== -1) return insertRandom(n)
  arr[n] = tmp
  return insertRandom(n - 1)
}
insertRandom(arr.length - 1)

3.background-clip：設置元素的背景（背景圖片或顏色）是否延伸到邊框下面

語法：css
- background-clip: border-box;背景延伸至邊框外沿（可是在邊框下層）
- background-clip: padding-box;背景延伸至內邊距（padding）外沿。不會繪製到邊框處。
- background-clip: content-box;背景被裁剪至內容區（content box）外沿。
- background-clip: text;背景被裁剪成文字的前景色。(有兼容性，谷歌不支持，火狐支持)
例子：半透明邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {
        width: 100%;
        padding: 60px 80px 80px;
        background: #b4a078;
    }
    div {
        padding: 12px;
        margin: 20px auto;
        background: white;
        border: 10px solid hsla(0, 0%, 100%, .5);
        background-clip: padding-box;
    }
    label {color: #f4f0ea;}
</style>

<body>
    <main>
        <div>A paragraph of filler text. La la la de dah de dah de dah de la.</div>
    </main>
</body>
</html>

輸出：

4.實現多重邊框

語法：html
- 圖一多重陰影邊框用到box-shadow還接受第四個參數做爲陰影擴張半徑，當咱們只設置擴張半徑時，零偏移，零模糊，產生的效果其實至關於一條實線「邊框」。
- 圖二描邊用到outline和對應的描邊偏移outline-offset來實現
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  main{
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  div:nth-of-type(1) {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: #fafafa;
    margin: 105px 29px;
    box-shadow: 0 0 0 10px #E8E2D6, 0 0 0 20px #E1D9C9,  
                0 0 0 30px #D9CFBB, 0 0 0 40px #D2C6AE,  
                0 0 0 50px #CABCA0, 0 0 0 60px #C3B393,
                0 0 0 70px #BBA985, 0 0 0 80px #B4A078;
  }
  div:nth-of-type(2){
    width: 200px; height: 120px;
    background: #efebe9;
    border: 5px solid #B4A078;
    outline: #B4A078 dashed 1px;
    outline-offset: -10px;
    margin-bottom: 20px;
  }
</style>
<body>
    <main>
        <div></div>
        <div></div>
      </main>
</body>
</html>

輸出：

5.實現邊框內圓角

語法：html5
- box-shadow是會緊貼border-radius圓角邊的，可是，描邊outline並不會與圓角邊border-radius貼合，咱們能夠將二者組合，經過box-shadow去填補描邊outline所產生的間隙來達到咱們想要的效果。張半徑，當咱們只設置擴張半徑時，零偏移，零模糊，產生的效果其實至關於一條實線「邊框」。
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {width: 100%;}
    div {
        width: 209px;
        margin: 29px auto;
        padding: 8px 16px;
        border-radius: 8px;
        background: #f4f0ea;
        outline: 6px solid #b4a078;
        box-shadow: 0 0 0 5px #b4a078;
    }
</style>
<body>
    <main>
        <div>例子</div>
    </main>
</body>
</html>

輸出：

6.實現圖片背景定位

語法：正則表達式
- background-position:一種CSS數據類型，2D座標空間，用來設置相對盒子的座標。
- calc：表達式使用標準運算符優先規則表示其包含的數學計算的結果，意味着從左到右計算表達式；除法或乘法將在加減運算符以前運算，括號內的表達式將首先進行計算。
```
.el 
{
margin-left: calc(10% + 10px); //將元素的左邊距指定爲其父級寬度的 「10%」 加上額外的 「10px」;
margin-left: calc(10% - 10px); //將元素的左邊距指定爲其父級寬度的 「10%」 減去額外的 「10px」：
}
```

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    main {
        width: 100%;
        padding: 80px 0px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    div {
        width: 229px;
        height: 139px;
        margin: auto;
        color: #f4f0ea;
        padding: 16px 29px 28px 20px;
        background: #b4a078 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAAqCAMAAABx9cIXAAAArlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8tivQqAAAAOXRSTlMAcBBQoPHQMJDgH/uwCwLs2iUU+MhgGuZ2BgRq1sx8VT+lnFk7K/WYAbyHgDXBuKqUi0llTbNFrYJ+UzMgAAAFQUlEQVRYw7VY53qiQBSlKS2IICq22Ets0ViSef8X27kwMo2yZL89f5Q77XD7oHDQZjf1oN5mmlKGljlV3+PRPVCqYSOENOXf0YsnLiKYxL2CWUP9u4EI+ovVfyDnOUd91OVEoeUiFu4lVGTsujbiEM1+Tc7Teo6zNo+zL73bVeMfy/j+iMb9DgKc2Jm6j0T4U1m5H0jC1uOmrE0OfTxjxYsGZOYZ5UMkt3snMvuxsBaPl3Z+djy3Yz+VN05z6zKfdIgLcB7QQFVwyMwIleCD7rhHgHb8WueobQS48tySgzuLVYvY5f6Wrgt/Ra7Nixv99uT0Zlz26vLLZHYcJYOjIev3o+QUlbVpYvlPTk9mlOhu8BtysJ1+n63MtdPTBkoBTLDPWEwMzhjC4kgTSATPNzF4LYRhUcGXXgWP7AdurVShNcHTmnJsak2QD1n1urq8/ADsjkpthOAQbOxq2k6e1YVXcHgZtePtRbVBrCxhDhmFk6hgfnEaxNyCeQ74Zc3cnDMEx5wqeZjCyw3p3uddbr6C4P7i/ARcmHowDc4l87zCz48qcncauBIgrd1T2/exUQvq1ZIcQwEpZyZb0Q2FcxdV5D7FjYS3+1YAT/xvXuS0Y+FcZQtpSHaekyi4VpAbNHCkCjJuySaJ8gtkenmc+lhXtMZY1sE7K4ixIK4gNxMWyV78JBnT3hW2DKJaPUhODufZEE8mK9lDtFWQi0sTwZFQD6GIKoVovrLCTktxgtDWGHxBE0P+DzLT6yI5ORF0hsU5cJMmhSdrOBmX184a+gt0MzuvRHJyhE+UYkzS4RtrFBkjGK5JDjJBIJMTo/6NE0h+3Mc/P3hpWDwLjHavSQ7YhBXksOtelHKD4R8LG79klvk6cqD+BdZZLmxQuPDIYaQotGxTCDGFOyQDrxSHhFI0UuqhgyqgJuT23CK5rHuV5Jxkr1rwUCW5Ss1ZqVm35eTWbDAHagmyqNIsHj4kK04yS5pDQynGAqEN/rnipcPiWSu2qOvl6uBQERBjKPvFOKfpNRYzvty+zP4DOZxu7PKr3Yk0Hk+ltMoF9ck5h8PhXSTXAyGxklWawSBvXYhTxcXkvrHxWyw5vSJsaJ76EMl5DdpfduFvqb3A04c48M/FRc6HprY2uXADXSpPjvj3hK4QG7WbYRhx1oIHxPodTQhRPGsRvjqbfX1y4AztlkTOcakHj7FJNPE6RtSpbV7tRiyn2dbp1bkvoIbXJuf5ZE9KjrZ+D8o/zinkjSCldMhatnZLvgDB0h5+F7vFkYvecnAGcvwhvpdD7ogw1pkW/VDycLgqaz7NILDzLafeu6tEcT+KUjNaW22yTE4lJ3q9mOd4nWZD5YCRT6Zj9rnbPvFdG4JmE9Ymt6TLKDnmpVOlBG5OcjyCEOYE7E0s8oRrZYRS7BWenN3MwZg9pwVPVn4S3sHDlnYertjnxuKp6w74v8DOaSCADeJ6AbGk2pErxJQODiYIwxrwtzJb/ESjgqAZyC0V+F0NclRxW6l8saMGWdVHGO3lkFJbyt/AdgZIOlfGvcw5UVxNclRxMjk6HBCT9RGgf5muNa+3Xm59lMKdsYntO5U9RquepwXPQ4QIjLrkhu1slWYmAIHGh7LxWtdEMnzgG7LsrkhGB4rQUiDn2znoU3KBgRGQbwkZNCZLQfnJ7Lh3EQ/36p0gVXNX6aeNBETrG8nYv2yZBh2JnAxn20AUm0WARTa+Z0z5rUZjjpqOuc/xrEddchTnSnIAT99GPtSLaDv1iqcd38/2Bptz/KkGeeOmUYKcpvCeDYqH/gH0uaoGeLQhjwAAAABJRU5ErkJggi8qICB8eEd2MDB8YzcwNDdjMGQ3NzA2ZTI2ZDhlZTlhMDVjOTFkZDA3MzggKi8=') no-repeat bottom right / 78px 21px;
    }
    div:nth-of-type(1) {
        background-position: right 29px bottom 28px;
    }
    div:nth-of-type(2) {
        background-origin: content-box;
        margin: 29px 0;
    }
    div:nth-of-type(3) {
        background-position: calc(100% - 29px) calc(100% - 28px);
    }
</style>

<body>
    <main>
        <div class="block1">background-position方案</div>
        <div class="block2">background-origin方案</div>
        <div class="block3">calc方案</div>
    </main>
</body>
</html>

輸出：

7. 頁面導入樣式時，使用link和@import有什麼區別？

link是HTML標籤，@import是css提供的。
link引入的樣式頁面加載時同時加載，@import引入的樣式需等頁面加載完成後再加載。
link沒有兼容性問題，@import不兼容ie5如下。
link能夠經過js操做DOM動態引入樣式表改變樣式，而@import不能夠。

8. html的元素有哪些（包含H5）？

塊級元素：算法

名稱	做用	名稱
head		div
meat	申明頁面的諸多屬性	ul
title	窗口標題	li
style	樣式	ol
body	文本內容	p
header	頭部塊	dl
section	內容塊	dt
footer	底部塊	dd
article	文章標籤	form
hr	下劃線	table
h1-h6	描述標題	theader
aside		tbody
nav		tr
menu		th
bir

行內元素：json

名稱
label
a
span
td
input
button
strong
b
i

9. CSS3有哪些新增的特性？

邊框(borders):api
- border-radius 圓角
- box-shadow 盒陰影
- border-image 邊框圖像
背景:跨域
- background-size 背景圖片的尺寸
- background_origin 背景圖片的定位區域
- background-clip 背景圖片的繪製區域
漸變：數組
- linear-gradient 線性漸變
- radial-gradient 徑向漸變
文本效果:瀏覽器
- word-break
- word-wrap
- text-overflow
- text-shadow
- text-wrap
- text-outline
- text-justify
轉換
2D轉換屬性
- transform
- transform-origin
2D轉換方法
- translate(x,y)
- translateX(n)
- translateY(n)
- rotate(angle)
- scale(n)
- scaleX(n)
- scaleY(n)
- rotate(angle)
- matrix(n,n,n,n,n,n)
3D轉換：
3D轉換屬性：
- transform
- transform-origin
- transform-style
3D轉換方法
- translate3d(x,y,z)
- translateX(x)
- translateY(y)
- translateZ(z)
- scale3d(x,y,z)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
- rotate3d(x,y,z,angle)
- rotateX(x)
- rotateY(y)
- rotateZ(z)
- perspective(n)
過渡
- transition
動畫
- @Keyframes規則
- animation
彈性盒子(flexbox)
多媒體查詢@media

10. 寫一個方法去掉字符串中的空格

實現思路：用正則表達式中的replace方法匹配，'s'是指空白符(包括空格，換行符，回車符，換頁符，製表符等)；<br/>
若是正則表達式不太明白的掘友，能夠查看我以前寫過有關正則表達式的我的總結篇

var trim = function(str){
    str.replace(/\s*/g,""); //去除字符串內全部的空格
    str.replace(/^\s*|\s*$/g,""); //去除字符串內兩頭的空格
    str.replace(/^\s*/,""); //去除字符串內左側的空格
    str.replace(/(\s*$)/g,""); //去除字符串內右側的空格
}

11. 在頁面上隱藏元素的方法有哪些？

佔位:
- visibility: hidden;
- margin-left: -100%;
- opacity: 0;
- transform: scale(0);
不佔位:
- display: none;
- width: 0; height: 0; overflow: hidden;
僅對塊內文本元素:
- text-indent: -9999px;
- font-size: 0;

12. 去除字符串中最後一個指定的字符？

function delLast(str, target) {
  return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');
}
const str = delLast('asdfghhj', 'h')
console.log(str) // asdfghj

13. CSS選擇器有哪些？哪些屬性能夠繼承？

CSS選擇器

能夠繼承的經常使用屬性
- font-size
- font-weight
- font-style
- font-family
- color
- text-indent
- text-align
- text-shadow
- line-height
- word-spacing
- letter-spacing
- text-transform

14. 寫一個方法把下劃線命名轉成大駝峯命名？

function transfor (str){
    var reg=/-[a-z]/g;
    return str.replace(reg,function(vc){
        return vc.slice(1).toUpperCase();
    })   
}

transfor("get-element-by-id");  //getElementById

15. 簡述超連接target屬性的取值和做用

_self: 在當前窗口打開頁面
_blank: 在新窗口打開頁面
_top: 在整個框架打開頁面不是很理解(在iframe或者frameset裏用的比較多)

16. 寫一個把字符串大小寫切換的方法

語法：
字符轉ascii碼：用charCodeAt()

ascii碼轉字符：用fromCharCode(number)

數組轉字符串: Array.join("-")

字符串轉數組: String.split(",")

function tansfrom(str){
//先把字符串轉爲數組
var charStr=str.split("");
//遍歷數組
    for(let i=0;i<charStr.length;i++){
        if(charStr[i].charCodeAt()>=65&&charStr[i].charCodeAt()<=90){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()+32);
        }else if(charStr[i].charCodeAt()>=97&&charStr[i].charCodeAt()<=122){
            charStr[i]=String.fromCharCode(charStr[i].charCodeAt()-32);
        }
    }
    return charStr.join("");
}
tansfrom("abA");

17. 認識BFC規範

BFC 全稱爲 塊格式化上下文。是Web頁面的可視化CSS渲染出的一部分。它是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由如下之一建立：
- 根元素或其它包含它的元素
- 浮動元素 (元素的 float 不是 none)
- 絕對定位元素 (元素具備 position 爲 absolute 或 fixed)
- 內聯塊 (元素具備 display: inline-block)
- 表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)
- 具備overflow 且值不是 visible 的塊元素，
- display: flow-root
- column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。
特性：
- 內部的盒子會在垂直方向上一個接一個的放置
- 對於同一個BFC的倆個相鄰的盒子的margin會發生重疊，與方向無關。
- 每一個元素的左外邊距與包含塊的左邊界相接觸（從左到右），即便浮動元素也是如此
- BFC的區域不會與float的元素區域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然

18. 統計某一字符或字符串在另外一個字符串中出現的次數

方法一：

function strCount(str, target) {
  let count = 0
  if (!target) return count
  while(str.match(target)) {
    str = str.replace(target, '')
    count++
  }
  return count
}

console.log(strCount('abcdef abcdef a', 'abc'));

方法二：

function substrCount(str, target) {
  let count = 0;
  while (str.includes(target)) {
    const index = str.indexOf(target);
    count++;
    str = str.substring(index + target.length);
  }
  return count;
}

方法三：（推薦！）

var str="abcdacd";
var target="a";
var childInNums = str.split(target).length - 1;

19. 瀏覽器內多個標籤頁之間的通訊方式有哪些？

stroage

localStorage和sessionStorage

localStorage保存數據會一直保存沒有過時時間，不會隨瀏覽器發送給服務器。大小5M或更大

sessionStorage僅當前頁面有效一旦關閉就會被釋放。也不會隨瀏覽器發送給服務器。大小5M或更大

localStorage和sessionStorage都繼承於Storage，提供了統一的api來訪問和設置數據。api列表爲：

clear 清空存儲中的全部本地存儲數據
getItem 接受一個參數key，獲取對應key的本地存儲
key 接受一個整數索引，返回對應本地存儲中索引的鍵
removeItem 接受一個參數key，刪除對應本地存儲的
keysetItem 接受兩個參數，key和value，若是不存在則添加，存在則更新。

localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();// 對象訪問方式一樣有效
localStorage.order = 'b110';
localStorage.order; // b110

postmessage

postMessage()方法容許來自不一樣源的腳本採用異步方式進行有限的通訊，能夠實現跨文本檔、多窗口、
跨域消息傳遞。html5引入的message的API，主要的功能：
1.頁面和其打開的新窗口的數據傳遞
2.多窗口之間消息傳遞
3.頁面與嵌套的iframe消息傳遞
4.上面三個問題的跨域數據傳遞

postMessage(data,origin)方法接受兩個參數

 1.data:要傳遞的數據，html5規範中提到該參數能夠是JavaScript的任意基本類型或可複製的對象，
 然而並非全部瀏覽器都作到了這點兒，部分瀏覽器只能處理字符串參數，因此咱們在傳遞參數的
 時候須要使用JSON.stringify()方法對對象參數序列化，在低版本IE中引用json2.js能夠實現相似效果。

2.origin：字符串參數，指明目標窗口的源，協議+主機+端口號[+URL]，URL會被忽略，因此能夠不寫，
這個參數是爲了安全考慮，postMessage()方法只會將message傳遞給指定窗口，
固然若是願意也能夠建參數設置爲"*"，這樣能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。

index.html

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">Frame Color</div>
</div>
<div>
    <iframe id="child" src="https://www.test2.com/test2.html"></iframe>
</div>


window.onload=function(){//傳輸數據
    window.frames[0].postMessage('getcolor','http://lslib.com');
}

test2.html

window.addEventListener('message',function(e){ //接收消息
    if(e.source!=window.parent) return;
    var color=container.style.backgroundColor;
    window.parent.postMessage(color,'*');
},false);

20. 漸進加強和優雅降級

漸進加強
一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、
交互、追加功能達到更好的體驗。
優雅降級
一開始就構建站點的完整功能，而後再針對低版本瀏覽器進行兼容。
好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack
使其能夠在低版本瀏覽器上正常瀏覽。

若低版本用戶居多，則優先採用漸進加強的開發流程；
若高版本用戶居多，則爲了提升大多數用戶的使用體驗，那固然優先採用優雅降級的開發流程。

21. 寫一個判斷數據類型的方法

分析
typeof 只能判斷基本類型 string,number,boolean,undefined,object
null 會被判斷成 object
比較全面的是使用 Object.prototype.toString 方法，只須要對返回值進行字符串分割便可

const typeCheck = (obj) => {
  const typeStr = Object.prototype.toString.call(obj); //返回格式：[object xxxxx]
  return typeStr.toLowerCase().slice(8, typeStr.length - 1);
};

console.log(typeCheck("str")); //string
console.log(typeCheck(1)); //number
console.log(typeCheck(() => null)); //function
console.log(typeCheck({a: 1})); //object
console.log(typeCheck([1, 2, 3]));//array
console.log(typeCheck(new Set([1,2,3]))); //set

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。