看全部問題和答案點這裡（https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers）
本文由我收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥倖混過關是錯誤的！也是不可能的！不可能的！不可能的！
前端還是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：「每18至24個月，前端都會難一倍」，這些變化使前端的能力更加豐富、創造的應用也會更加完美。所以關注各種前端技術，跟上快速變化的節奏，也是身為一個前端程式設計師必備的技能之一。
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的分支）]
簡述一下你對HTML語義化的理解
用正確的標籤做正確的事情。html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的;搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源並進行離線存儲。離線的情況下，瀏覽器就直接使用離線存儲的資源。
請描述一下 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或者svg2、border-radius3、純js實現 需要求一個點在不在圓上簡單算法、獲取滑鼠坐標等等
介紹一下標準的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設置一個寬度，然後添加margin:0 auto屬性
div{ width:200px; margin:0 auto; }
讓絕對定位的div居中
div { position: absolute; width: 300px; height: 300px margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */}
水平垂直居中一
確定容器的寬高 寬500 高 300 的層設置層的外邊距div { position: relative; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */ background-color: pink; /* 方便看效果 */ }
水平垂直居中二
未知容器的寬高，利用 `transform` 屬性div { position: absolute; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */}
水平垂直居中三
利用 flex 布局實際使用時應考慮兼容性.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */}.container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */}
display有哪些值？說明他們的作用。
block 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。 none 預設值。象行內元素類型一樣顯示。 inline 行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。 inline-block 默認寬度為內容寬度，可以設置寬高，同行顯示。 list-item 象塊類型元素一樣顯示，並添加樣式列表標記。 table 此元素會作為塊級表格來顯示。 inherit 規定應該從父元素繼承 display 屬性的值。
position的值relative和absolute定位原點是？
absolute 生成絕對定位的元素，相對於值不為 static的第一個父元素進行定位。 fixed （老IE不支持） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對於其正常位置進行定位。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規定從父元素繼承 position 屬性的值。
CSS3有哪些新特性？
新增各種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:
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
.
用純CSS創建一個三角形的原理是什麼？
把上、左、右三條邊隱藏掉（顏色設為 transparent）#demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent;}
一個滿屏 品 字布局 如何設計?
簡單的方式： 上面的div寬100%， 下面的兩個div分別寬50%， 然後用float或者inline使其不換行即可
css多列等高如何實現？
利用padding-bottom|margin-bottom正負值相抵；設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它裡面的列沒有設定padding-bottom時的高度，當它裡面的任 一列高度增加了，則父容器的高度被撐到裡面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度差。
li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
為什麼要初始化CSS樣式。
- 因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對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; }
absolute的containing block(容器塊)計算方式跟正常流有什麼不同？
無論屬於哪種，都要先找到其祖先元素中最近的 position 值不為 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裡的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
對BFC規範(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。） 一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。 不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
css定義的權重
以下是權重的規則：標籤的權重為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 的文字？ 1、用圖片：如果是內容固定不變情況下，使用將小於12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。 2、使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設計美工圖時候設置大於或等於12px的字體大小，如果是接單的這個時候就需要給客戶講解小於12px瀏覽器不兼容等事宜。 3、繼續使用小於12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小於12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。 4、使用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屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。