曾經面試踩過的坑，都在這裡了～
阿新 • • 發佈：2018-12-15
前言
前段時間面試(包括阿里巴巴的電話面試)，遇到過一些面試題，且面試中出現機率較高的提問/筆試，有些答的不是很好掛掉了，今天終於有時間整理出來分享給大家，希望對大家面試有所幫助，都能輕鬆拿offer。
主要分三部分：
html、css、js；react/vue等都歸類於js,內容來源於面試過程中遇到的、在複習過程中看到認為值得加深鞏固、群友交流分享的；如有理解的錯誤或不足之處，歡迎留言糾錯、斧正，這裡是@IT·平頭哥聯盟，我是首席填坑官∙蘇南(South·Su) ^_^～
HTML
1、什麼是盒子模型？
有些面試官會問你對盒子模型的理解，在我們平時看到的網頁中，內部的每一個標籤元素它都是有幾個部分構成的：內容(content)、外邊距(margin)、內邊距(padding)、邊框(border)，四個部分組成，當你說完這些面試官是不會滿意這個答案的，因為還有一個重點（ IE盒模型和標準盒模型的區別）———IE盒模型的content包括border、padding
2、頁面匯入樣式時有幾種方法，它們之間有區別？
link標籤引入，也是當下用的最多的一種方式，它屬於XHTML標籤，除了能載入css外，還能定義rel、type、media等屬性;@import引入，@import是CSS提供的，只能用於載入CSS;style嵌入方式引入，減少頁面請求(優點)，但只會對當前頁面有效，無法複用、會導致程式碼冗餘，不利於專案維護(缺點)，此方式一般只會專案主站首頁使用（騰訊、淘寶、網易、搜狐）等大型網站主頁，之前有看到過都是這種方式，但後來有些也捨棄了
小結
：link頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入,且link是XHTML標籤，無相容問題; link支援動態js去控制DOM節點去改變樣式，而@import不支援，
3、簡單講述一下塊元素、內聯元素、空元素有哪些，它們之間的區別？
- 行內元素有：a、b、span、img、input、select、textarea、em、img、strong（強調的語氣）;
- 塊級元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4…p、section、div、form等;
- 空元素： input type=”hidden”/>、br>、hr>、link>、meta>;
小結：塊元素總是獨佔一行，margin對內聯元素上下不起作用;
4、說說 cookies，sessionStorage 、 localStorage 你對它們的理解？
- cookie是網站為了標示使用者身份而儲存在使用者本地終端上的資料（通常經過加密），cookie資料始終在同源的http請求中攜帶，記會在瀏覽器和伺服器間來回傳遞。
- sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
- 大小： cookie資料大小不能超過4k,sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
- 時效：
localStorage儲存持久資料，瀏覽器關閉後資料不丟失除非使用者主動刪除資料或清除瀏覽器/應用快取；sessionStorage資料在當前瀏覽器視窗關閉後自動刪除。 cookie設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉部分面試官可能還會再深入一些：
1)、如何讓cookie瀏覽器關閉就失效？——不對cookie設定任何正、負或0時間的即可;
2)、sessionStorage在瀏覽器多視窗之間 (同域)資料是否互通共享? ——不會，都是獨立的，localStorage會共享;
3)、能讓localStorage也跟cookie一樣設定過期時間？答案是可以的，在儲存資料時，也儲存一個時間戳，get資料之前，先拿當前時間跟你之前儲存的時間戳做比較 詳細可看我之前寫的另一篇分享（小程式專案總結 ）。
5、簡述一下你對HTML語義化的理解 ？
語義化是指根據內容的型別，選擇合適的標籤（程式碼語義化）,即用正確的標籤做正確的事情; html語義化讓頁面的內容結構化，結構更清晰，有助於瀏覽器、搜尋引擎解析對內容的抓取; 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與程式碼結構; 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
CSS
1、position的static、relative、absolute、fixed它們的區別？
absolute：絕對定位，元素會相對於值不為 static 的第一個父元素進行定位(會一直往父級節點查詢)，且它是脫離正常文件流、不佔位的;fixed:同樣是絕對定位，但元素會相對於瀏覽器視窗進行定位，而不是父節點的position (IE9以下不支援);relative:相對定位，元素相對於自身正常位置進行定位,屬於正常文件流;static: position的預設值，也就是沒有定位，當元素設定該屬性後（ top、bottom、left、right、z-index ）等屬性將失效;inherit:貌似沒用過，查了一下文件“規定從父元素繼承 position 屬性的值”;
2、如何讓一個元素垂直/水平（垂直水平）都居中，請列出你能想到的幾種方式？
- 水平垂直居中 —— 方式一
1234567891011121314 <div class="div-demo"></div><style>.div-demo{width:100px;height:100px;background-color:#06c;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;}</style>
- 水平垂直居中 —— 方式二
12345678910111213 <style>.div-demo{width:100px;height:100px;background-color:#06c;margin:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}</style>
- 水平垂直居中 —— 方式三，（新舊伸縮盒相容）
123456789101112131415161718192021222324252627 <body class="container"><div class="div-demo"></div><style>html,body{height:100%;}.container{display:box;display:-webkit-box;display:flex;display:-webkit-flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}.div-demo{width:100px;height:100px;background-color:#06c;}</style></body>
3、專案中有用純CSS樣式寫過 三角形icon嗎？
| 12345678910111213141516171819202122232425262728293031323334353637383940414243 | <body class="container"><div class="div-angles"></div><div class="div-angles right"></div><div class="div-angles bottom"></div><div class="div-angles left"></div><style>html,body{height:100%;}.container{display:box;display:-webkit-box;display:flex;display:-webkit-flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}.div-angles{width:0;height:0;border-style:solid;border-width:30px;width:0px;height:0px;border-color:transparenttransparent#06ctransparent;}.right{border-color:transparenttransparenttransparent#06c;}.bottom{border-color:#06ctransparenttransparent;}.left{border-color:transparent#06ctransparenttransparent;}</style></body> |
4、什麼是外邊距合併,專案中是否有遇到過?
- 有，外邊距合併指的是，當兩個垂直元素的都設定有margin外邊距相遇時，它們將形成一個外邊距。 合併後的外邊距的高度等於兩個發生合併的外邊距的值中的較大那個。
5、:before 和 :after兩偽元素，平時都是使用雙冒號還是單冒號？有什麼區別？以及它們的作用：
- 單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成） ;
- 雙冒號是在當前規範中引入的，用於區分偽類和偽元素。不過瀏覽器需要同時支援舊的已經存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支援舊的單冒號的寫法;
- 想讓插入的內容出現在其它內容前，使用
::before，之後則使用::after； 在程式碼順序上，::after生成的內容也比::before生成的內容靠後。
如果按堆疊視角，::after生成的內容會在::before生成的內容之上;
6、Chrome、Safari等瀏覽器，當表單提交使用者選擇記住密碼後，下次自動填充表單的背景變成黃色，影響了視覺體驗是否可以修改？
| 123456789 | input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{background-color:#fff;//設定成元素原本的顏色background-image:none;color:rgb(0,0,0);}//方法2：由(licongwen )補充input:-webkit-autofill{-webkit-box-shadow:0px03px100px#ccc inset; //背景色} |
7、瀏覽器的最小字型為12px，如果還想再小，該怎麼做？
- 用圖片：如果是展示的內容基本是固定不變的話，可以直接切圖相容性也完美(不到萬不得已，不建議);
- 找UI設計師溝通：為了相容各大主流瀏覽器，避免後期設計師來找你撕逼，主動找TA溝通，講明原因 ————注意語氣，好好說話不要激動，更不能攜刀相逼;
- CSS3：css3的樣式transform: scale(0.7)，scale有縮放功能;
- 又去找chrome複習了一下，說是 “display:table;display: table-cell;” 可以做到，沒用過。
8、移動端的邊框0.5px,你有幾種方式實現？
- devicePixelRatio:它是window物件中有一個devicePixelRatio屬性，裝置物理畫素和裝置獨立畫素的比例，也就是 devicePixelRatio = 物理畫素 / 獨立畫素;這種方式好麻煩，js檢測，再給元素新增類名控制，難維護;
- 切圖：直接.5px的切圖，這種方式太low，建議還是別用了，特別難維護，高清屏就糊了,更重要的是被同行看到會覺得你們很渣渣～;
- image背景：css3的background-image:
linear-gradient，缺點就是：樣式多，遇到圓角這個方案就杯劇了; box-shadow:網上看到說使用box-shadow模擬邊框，box-shadow: inset 0px -1px 1px -1px #06c;沒用過，不過多評論，建議自己百度; - 偽類縮放：現在用的比較多的方式之一 :after 1px然後transform: scale(0.5);基本能滿足所有場景，對於圓角的處理也很方便;
貼上3、5兩方案程式碼，也是目前公司一直在用的(預處理SCSS)：
| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748 | //3、css3的background-image 本文由@IT·平頭哥聯盟-首席填坑官∙蘇南分享@mixin border($top:1,$right:1,$bottom:1,$left:1,$color:#ebebf0) {background-image:linear-gradient(180deg,$color,$color50%,transparent50%),linear-gradient(90deg,$color,$color50%,transparent50%),linear-gradient(0deg,$color,$color50%,transparent50%),linear-gradient(90deg,$color,$color50%,transparent50%);background-size:100%$top+px,$right+px100%,100%$bottom+px,$left+px100%;background-repeat:no-repeat;background-position:top,right top,bottom,left top;}@mixin borderTop($top:1,$ |