本文由我收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鍊。萬不可投機取巧，臨時抱佛腳隻求面試僥幸混過關是錯誤的！也是不可能的！不可能的！不可能的！
前端還是一個年輕的行業，新的行業标準， 架構， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：“每18至24個月，前端都會難一倍”，這些變化使前端的能力更加豐富、創造的應用也會更加完美。是以關注各種前端技術，跟上快速變化的節奏，也是身為一個前端程式員必備的技能之一。
面試有幾點需注意：(來源寒冬winter 老師，github:@wintercn)
- 面試題目： 根據你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增加。
- 題目類型： 理論知識、算法、項目細節、技術視野、開放性題、工作案例。
- 細節追問： 可以確定問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區分度和深度，知道你的實際能力。因為這種知識關聯是長時期的學習，臨時抱佛腳絕對是記不住的。
- 回答問題再棒，面試官（可能是你面試職位的直接上司），會考慮我要不要這個人做我的同僚？是以态度很重要、除了能做事，還要會做人。（感覺更像是相親( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）
- 資深的前端開發能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的是：你這個人具有可以依靠的才能（靠譜）。
前端開發知識點：
HTML&CSS：
對Web标準的了解、浏覽器核心差異、相容性、hack、CSS基本功：
布局、盒子模型、選擇器優先級、HTML5、CSS3、Flexbox
JavaScript：
資料類型、運算、對象、Function、繼承、閉包、作用域、原型鍊、
事件、RegExp、JSON、Ajax、DOM、BOM、記憶體洩漏、跨域、異步裝載、
模闆引擎、前端MVC、路由、子產品化、Canvas、ECMAScript 6、Nodejs
其他：
移動端、響應式、自動化建構、HTTP、離線存儲、WEB安全、優化、
重構、團隊協作、可維護、易用性、SEO、UED、架構、職業生涯、
快速學習能力
作為一名前端工程師，無論工作年頭長短都應該掌握的知識點：
1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
2、DOM操作 —— 如何添加、移除、移動、複制、建立和查找節點等。
3、事件 —— 如何使用事件，以及IE和标準DOM事件模型之間存在的差别。
4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
6、盒模型 —— 外邊距、内邊距和邊框之間的關系，及IE8以下版本的浏覽器中的盒模型
7、塊級元素與行内元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
8、浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
9、HTML與XHTML —— 二者有什麼差別，你覺得應該使用哪一個并說出理由。
10、JSON —— 作用、用途、設計結構。
HTML
Doctype作用？标準模式與相容模式各有什麼差別?
（1）<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html>
标簽之前。告知浏覽器的解析器用什麼文檔标準解析這個文檔。DOCTYPE
不存在或格式不正确會導緻文檔以相容模式呈現。
（2）标準模式的排版 和JS運作模式都是以該浏覽器支援的最高标準運作。
在相容模式中，頁面以寬松的向後相容的方式顯示,模拟老式浏覽器的行為以
防止站點無法工作。
HTML5 為什麼隻需要寫 <!DOCTYPE HTML>？
HTML5 不基于 SGML，是以不需要對DTD進行引用，但是需要doctype
來規範浏覽器的行為（讓浏覽器按照它們應該的方式來運作）；
而HTML4.01基于SGML,是以需要對DTD進行引用，才能告知浏覽器文檔所
使用的文檔類型。
行内元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規範規定，每個元素都有display屬性，确定該元素的類型，
每個元素都有預設的display值，如div的display預設值為“block”，
則為“塊級”元素；span預設display屬性值為“inline”，是“行内”元素。
（1）行内元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen>
<param> <source> <track> <wbr>
頁面導入樣式時，使用link和@import有什麼差別？
（1）link屬于XHTML标簽，除了加載CSS外，還能用于定義RSS,
定義rel連接配接屬性等作用；而@import是CSS提供的，隻能用于加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到
頁面被加載完再加載;
（3）import是CSS2.1 提出的，隻在IE5以上才能被識别，而link是
XHTML标簽，無相容問題;
介紹一下你對浏覽器核心的了解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和
JS引擎。
渲染引擎：負責取得網頁的内容（HTML、XML、圖像等等）、整理訊息（例如
加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或列印機。浏
覽器的核心的不同對于網頁的文法解釋會有不同，是以渲染的效果也不相同。
所有網頁浏覽器、電子郵件用戶端以及其它需要編輯、顯示網絡内容的應用程
序都需要核心。
JS引擎則：解析和執行javascript來實作網頁的動态效果。
最開始渲染引擎和JS引擎并沒有區分的很明确，後來JS引擎越來越獨立，内
核就傾向于隻指渲染引擎。
常見的浏覽器核心有哪些？
Trident核心：IE,MaxThon,TT,The World,360,搜狗浏覽器等。
[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。[Opera核心原為：Presto，現為：Blink]
Webkit核心：Safari,Chrome等。[Chrome的：Blink(WebKit的分支)]
詳細文章：浏覽器核心的解析和對比
html5有哪些新特性、移除了那些元素？如何處理HTML5新标簽的浏覽器相容問題？如何區分 HTML 和HTML5？
* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，
多任務等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲資料，浏覽器關閉後資料不丢失;
sessionStorage 的資料在浏覽器關閉後自動删除;
語意化更好的内容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性産生負面影響的元素：frame，frameset，noframes；
* 支援HTML5新标簽：
IE8/IE7/IE6支援通過document.createElement方法産生的标簽，
可以利用這一特性讓這些浏覽器支援HTML5新标簽，
浏覽器支援新标簽後，還需要添加标簽預設的樣式。
當然也可以直接使用成熟的架構、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn
/trunk/html5.js"</script>
<![endif]-->
* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素
簡述一下你對HTML語義化的了解？
用正确的标簽做正确的事情。
html語義化讓頁面的内容結構化，結構更清晰，便于對浏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜尋引擎的爬蟲也依賴于HTML标記來确定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易将網站分塊，便于閱讀維護了解。
HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
在使用者沒有與網際網路連接配接時，可以正常通路站點或應用，在使用者與網際網路
連接配接時，更新使用者機器上的緩存檔案。
原理：HTML5的離線存儲是基于一個建立的.appcache檔案的緩存機制(不是
存儲技術)，通過這個檔案上的解析清單離線存儲資源，這些資源就會像cookie
一樣被存儲了下來。之後當網絡在處于離線狀态下時，浏覽器會通過被離線存
儲的資料進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest檔案的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀态時，操作window.applicationCache進行需求實作。
詳細的使用請參考：有趣的HTML5：離線存儲
浏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
線上的情況下，浏覽器發現html頭部有manifest屬性，它會請求manifest
檔案，如果是第一次通路app，那麼浏覽器就會根據manifest檔案的内容下
載相應的資源并且進行離線存儲。如果已經通路過app并且資源已經離線存儲
了，那麼浏覽器就會使用離線的資源加載頁面，然後浏覽器會對比新的manifest
檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果
檔案改變了，那麼就會重新下載下傳檔案中的資源并進行離線存儲。離線的情況下，
浏覽器就直接使用離線存儲的資源。
詳細的使用請參考：有趣的HTML5：離線存儲
請描述一下 cookies，sessionStorage 和 localStorage 的差別？
cookie是網站為了标示使用者身份而儲存在使用者本地終端（Client Side）
上的資料（通常經過加密）。
cookie資料始終在同源的http請求中攜帶（即使不需要），記會在浏覽器和
伺服器間來回傳遞。
sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
存儲大小：
cookie資料大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比
cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久資料，浏覽器關閉後資料不丢失除非主動
删除資料；
sessionStorage 資料在目前浏覽器視窗關閉後自動删除。
cookie 設定的cookie過期時間之前一直有效，即使視窗或
浏覽器關閉
iframe有那些缺點？
*iframe會阻塞首頁面的Onload事件；
*搜尋引擎的檢索程式無法解讀這種頁面，不利于SEO;
*iframe和首頁面共享連接配接池，而浏覽器對相同域的連接配接有限制，是以會
影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過
javascript動态給iframe添加src屬性值，這樣可以繞開以上兩個問題。
Label的作用是什麼？是怎麼用的？
label标簽來定義表單控制間的關系,當使用者選擇該标簽時，浏覽器會自動
将焦點轉到和标簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或某個 input 設定為 autocomplete=off。
如何實作浏覽器内多個标簽頁之間的通信? (阿裡)
WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個浏覽上下文裡被添加、修改或删除時，它都會觸發
一個事件，我們通過監聽事件，控制它的值來進行頁面資訊通信；
注意quirks：Safari 在無痕模式下設定localstorge值時會抛出
QuotaExceededError 的異常；
webSocket如何相容低浏覽器？(阿裡)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 編碼發送 XHR 、
基于長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途？
通過 visibilityState 的值檢測頁面目前是否可見，以及打開網頁的時間等;
在頁面被切換到其他背景程序的時候，自動暫停音樂或視訊的播放；
如何在頁面上實作一個圓形的可點選區域？
1、map+area或者svg
2、border-radius
3、純js實作 需要求一個點在不在圓上簡單算法、擷取滑鼠坐标等等
實作不使用 border 畫出1px高的線，在不同浏覽器的标準模式與怪異模式下都能保持一緻的效果。
<div style="height:1px;overflow:hidden;background:red"></div>
網頁驗證碼是幹嘛的，是為了解決什麼安全問題。
區分使用者是計算機還是人的公共全自動程式。可以防止惡意破解密碼、
刷票、論壇灌水；
有效防止黑客對某一個特定注冊使用者用特定程式暴力破解方式進行不斷的登陸嘗試。
title與h1的差別、b與strong的差別、i與em的差別？
title屬性沒有明确意義隻表示是個标題，H1則表示層次明确的标題，
對頁面資訊的抓取也有很大的影響；
strong是标明重點内容，有語氣加強的含義，使用閱讀裝置閱讀網絡時：
<strong>會重讀，而<B>是展示強調内容。
i内容展示為斜體，em表示強調的文本；
Physical Style Elements -- 自然樣式标簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式标簽
strong, em, ins, del, code
應該準确使用語義樣式标簽, 但不能濫用, 如果不能确定時首選使用自然樣式标簽。
CSS
介紹一下标準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 内容(content)、填充(padding)、邊界(margin)、
邊框(border)；
（3）區 别： IE的content部分把 border 和 padding計算了進去;
CSS選擇符有哪些？哪些屬性可以繼承？
* 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.标簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.僞類選擇器（a:hover, li:nth-child）
* 可繼承的樣式： font-size font-family color, UL LI DL
DD DT;
* 不可繼承的樣式：border padding margin width height ;
- CSS優先級算法如何計算？
* 優先級就近原則，同權重情況下樣式定義最近者為準; * 載入樣式以最後載入的定位為準; 優先級為: !important > id > class > tag important 比 内聯優先級高 - CSS3新增僞類有那些？
舉例： p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 <p> 元素。 p:last-of-type 選擇屬于其父元素的最後 <p> 元素的每個 <p> 元素。 p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 :after 在元素之前添加内容,也可以用來做清除浮動。 :before 在元素之後添加内容 :enabled :disabled 控制表單控件的禁用狀态。 :checked 單選框或複選框被選中。 -
如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
給div設定一個寬度，然後添加margin:0 auto屬性
居中一個浮動元素div{ width:200px; margin:0 auto; }
讓絕對定位的div居中确定容器的寬高 寬500 高 300 的層 設定層的外邊距 .div { width:500px ; height:300px;//高度可以不設 margin: -150px 0 0 -250px; position:relative; //相對定位 background-color:pink; //友善看效果 left:50%; top:50%; }
display有哪些值？說明他們的作用。position: absolute; width: 1200px; background: none; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;
position的值relative和absolute定位原點是？block 象塊類型元素一樣顯示。 none 預設值。象行内元素類型一樣顯示。 inline-block 象行内元素一樣顯示，但其内容象塊類型元素一樣顯示。 list-item 象塊類型元素一樣顯示，并添加樣式清單标記。 table 此元素會作為塊級表格來顯示 inherit 規定應該從父元素繼承 display 屬性的值absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。 fixed （老IE不支援） 生成絕對定位的元素，相對于浏覽器視窗進行定位。 relative 生成相對定位的元素，相對于其正常位置進行定位。 static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規定從父元素繼承 position 屬性的值。 CSS3有哪些新特性？
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及适用場景？新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （Shadow\Reflect） 文字特效 （text-shadow、） 文字渲染 （Text-decoration） 線性漸變 （gradient） 旋轉 （transform） 增加了旋轉,縮放,定位,傾斜,動畫，多背景 transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用純CSS建立一個三角形的原理是什麼？.
一個滿屏 品 字布局 如何設計?把上、左、右三條邊隐藏掉（顔色設為 transparent） #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; }
經常遇到的浏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？簡單的方式： 上面的div寬100%， 下面的兩個div分别寬50%， 然後用float或者inline使其不換行即可
li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？* png24位的圖檔在iE6浏覽器上出現背景，解決方案是做成PNG8. * 浏覽器預設的margin和padding不同。解決方案是加一個全局的 *{margin:0;padding:0;}來統一。 * IE6雙邊距bug:塊屬性标簽float後，又有橫行的margin情況下， 在ie6顯示margin比設定的大。 浮動ie産生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;} 這種情況之下IE會産生20px的距離，解決方案是在float的标簽樣式 控制中加入 ——_display:inline;将其轉化為行内屬性。(_這個符 号隻有ie6會識别) 漸進識别的方式，從總體中逐漸排除局部。 首先，巧妙的使用“\9”這一标記，将IE遊覽器從所有情況中分離出 來。接着，再次使用“+”将IE8和IE7、IE6分離開來，這樣IE8已經 獨立識别。 css .bb{ background-color:#f1ee18;/*所有識别*/ .background-color:#00deff\9; /*IE6、7、8識别*/ +background-color:#a200ff;/*IE6、7識别*/ _background-color:#1e0bd1;/*IE6識别*/ } * IE下,可以使用擷取正常屬性的方法來擷取自定義屬性, 也可以使用getAttribute()擷取自定義屬性; Firefox下,隻能使用getAttribute()擷取自定義屬性。 解決方法:統一通過getAttribute()擷取自定義屬性。 * IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。 * 解決方法：（條件注釋）缺點是在IE浏覽器下可能會增加額外的HTTP請求數。 * Chrome 中文界面下預設會将小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。 超連結通路過後hover樣式就不出現了 被點選通路過的超連結樣式不在 具有hover和active了解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
為什麼要初始化CSS樣式。行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字元 ,這些空白也會被應用樣式，占據空間，是以會有間隔，把字元大小設為 0，就沒有空格了。
absolute的containing block(容器塊)計算方式跟正常流有什麼不同？- 因為浏覽器的相容問題，不同浏覽器對有些标簽的預設值是不同的， 如果沒對CSS初始化往往會出現浏覽器之間的頁面顯示差異。 - 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但 力求影響最小的情況下初始化。 最簡單的初始化方法：* {padding: 0; margin: 0;}(強烈不建議） 淘寶的樣式初始化代碼： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
CSS裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同浏覽器下以後什麼差別？ position跟display、margin collapse、overflow、float這些特性互相疊加後會怎麼樣？ 對BFC規範(塊級格式化上下文：block formatting context)的了解？static 的元素，然後再判斷： 1、若此元素為 inline 元素，則 containing block 為能夠包含 這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形； 2、否則,則由這個祖先元素的 padding box 構成。 如果都找不到，則為 initial containing block。 補充： 1. static(預設的)/relative：簡單說就是它的父元素的内容框（ 即去掉padding的部分） 2. absolute: 向上找最近的定位為absolute/relative的元素 3. fixed: 它的containing block一律為根元素(html/body)， 根元素也是initial containing block
css定義的權重（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如 何對其内容進行定位,以及與其他元素的關系和互相作用。）一個頁面是 由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。不同類型的 Box,會參與不同的 Formatting Context （決定如何渲染文檔的容器）,是以Box内的元素會以不同的方式渲染, 也就是說BFC内部的元素和外部的元素不會互相影響。以下是權重的規則：标簽的權重為1，class的權重為10，id的權重為 100，以下例子是示範各種定義的權重值： /*權重為1*/ div{ } /*權重為10*/ .class1{ } /*權重為100*/ #id1{ } /*權重為100+1=101*/ #id1 div{ } /*權重為10+1=11*/ .class1 div{ } /*權重為10+10+1=21*/ .class1 .class2 div{ } 如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現 - 請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
- 移動端的布局用過媒體查詢嗎？
- 使用 CSS 預處理器嗎？喜歡那個？
SASS (SASS、LESS沒有本質差別，隻因為團隊前端都是用的SASS) - CSS優化、提高性能的方法有哪些？
- 浏覽器是怎樣解析CSS選擇器的？
- 在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
- margin和padding分别适合什麼場景使用？
- 抽離樣式子產品怎麼寫，說出思路，有無實踐經驗？[阿裡航旅的面試題]
- 元素豎向的百分比設定是相對于容器的高度嗎？
- 全屏滾動的原理是什麼？用到了CSS的那些屬性？
- 什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
- 視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和隻出現一次分别怎麼做？）
- ::before 和 :after中雙冒号和單冒号 有什麼差別？解釋一下這2個僞元素的作用。
- 如何修改chrome記住密碼後自動填充表單的黃色背景 ？
- 你對line-height是如何了解的？
- 設定元素浮動後，該元素的display值是多少？（自動變成display:block）
- 怎麼讓Chrome支援小于12px 的文字？
- 讓頁面裡的字型變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
- font-style屬性可以讓它指派為“oblique” oblique是什麼意思？
- position:fixed;在android下無效怎麼處理？
- 如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿裡）
多數顯示器預設頻率是60Hz，即1秒重新整理60次，是以理論上最小間隔為1/60＊1000ms ＝ 16.7ms - display:inline-block 什麼時候會顯示間隙？(攜程)
移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing - overflow: scroll時不能平滑滾動的問題怎麼處理？
- 有一個高度自适應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
- png、jpg、gif 這些圖檔格式解釋一下，分别什麼時候用。有沒有了解過webp？
- 什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
如果靜态檔案都放在主域名下，那靜态檔案請求的時候都帶有的cookie的資料送出給server的，非常浪費流量， 是以不如隔離開。 因為cookie有域的限制，是以不能跨域送出請求，故使用非主要域名的時候，請求頭中就不會帶有cookie資料， 這樣可以降低請求頭的大小，降低請求時間，進而達到降低整體請求延時的目的。 同時這種方式不會将cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節， 提高了webserver的http請求的解析速度。 - style标簽寫在body後與body前有什麼差別？
- 什麼是CSS 預處理器 / 後處理器？
- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的複用性， 還有層級、mixin、變量、循環、函數等，具有很友善的UI元件子產品化開發能力，極大的提高工作效率。 - 後處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規範處理CSS，讓其更有效；目前最常做的 是給CSS屬性添加浏覽器私有字首，實作跨浏覽器相容性的問題
![Vue.js的常見用法及基本原理 Vue.js 快速入門[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)