前言

一直有一個(gè)收集一些的筆面試題的習(xí)慣影锈。之前發(fā)過(guò)一部分，鏈接：
200道前端基礎(chǔ)題及答案（上）
200道前端基礎(chǔ)題及答案（下）
近期又收集了一些妇汗，分享給大家

目錄

1. 聊一下http和https
2. TCP和UDP的區(qū)別
3. WebSocket 的實(shí)現(xiàn)和應(yīng)用
4. 說(shuō)說(shuō)drag api
5. 說(shuō)一下 http2.0
6. 400和401、403狀態(tài)碼
7. 說(shuō)說(shuō)fetch 發(fā)送 2 次請(qǐng)求的原因
8. 說(shuō)說(shuō)cookie、sessionStorage碰声、localStorage
9. 對(duì) HTML 語(yǔ)義化標(biāo)簽的理解
10. 聊聊iframe
11. 說(shuō)說(shuō)Doctype的作用
12. Cookie如何防范 XSS 攻擊
13. addEventListener如何使用
14. 說(shuō)說(shuō)cookie和session的區(qū)別
15. 說(shuō)說(shuō)http返回的狀態(tài)碼
16. 說(shuō)說(shuō)http常用請(qǐng)求頭
17. 說(shuō)說(shuō)強(qiáng)緩存和協(xié)商緩存
18. 簡(jiǎn)單說(shuō)說(shuō)前端優(yōu)化方案
19. 說(shuō)說(shuō)GET 和 POST 的區(qū)別
20. 狀態(tài)碼 304 和 200
21. CSS畫(huà)一個(gè)三角形
22. H5有哪些新增的元素
23. 在地址欄里輸入一個(gè) URL,到這個(gè)頁(yè)面呈現(xiàn)出來(lái)耍共，中間會(huì)發(fā)生什么烫饼？
24. cache-control 的值有哪些
25. 瀏覽器在生成頁(yè)面的時(shí)會(huì)生成哪兩顆樹(shù)
26. CSRF和XSS的網(wǎng)絡(luò)攻擊及防范
27. 如何看網(wǎng)站的性能如何
28. 說(shuō)說(shuō)HTTP 協(xié)議特征
29. 簡(jiǎn)述輸入 URL 到頁(yè)面加載顯示完成發(fā)生了什么
30. cookie的編碼方式
31. 說(shuō)說(shuō)css 盒模型
32. link標(biāo)簽和@import 標(biāo)簽的區(qū)別
33. transition和animation的區(qū)別
34. 說(shuō)說(shuō)flex布局
35. 說(shuō)說(shuō)BFC
36. JS動(dòng)畫(huà)和css3動(dòng)畫(huà)的差異
37. 行內(nèi)元素和塊級(jí)元素以及行級(jí)塊元素
38. visibility=hidden和opacity=0以及display:none的區(qū)別
39. 外邊距折疊
40. CSS權(quán)重
41. 實(shí)現(xiàn)圖片在某個(gè)容器中居中
42. 如何實(shí)現(xiàn)元素的垂直居中
43. 浮動(dòng)元素其display 是什么
44. 隱藏頁(yè)面中某個(gè)元素的方法
45. 關(guān)于calc
46. 聊聊display:table和table標(biāo)簽
47. 說(shuō)說(shuō)position都有哪些值
48. 關(guān)于z-index
49. 說(shuō)說(shuō)CSS3有哪些新特性
50. height和line-height的區(qū)別

1.聊一下http和https

http 和 https 的基本概念

http: 超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議试读，是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)（TCP）杠纵，用于從WWW服務(wù)器傳輸超文本到本地瀏覽器的傳輸協(xié)議，它可以使瀏覽器更加高效钩骇，使網(wǎng)絡(luò)傳輸減少比藻。
https: 是以安全為目標(biāo)的HTTP通道，簡(jiǎn)單講是HTTP的安全版伊履，即 HTTP 下加入 SSL層韩容，HTTPS的安全基礎(chǔ)是SSL，因此加密的詳細(xì)內(nèi)容就需要 SSL唐瀑。https協(xié)議的主要作用是建立一個(gè)信息安全通道群凶，來(lái)確保數(shù)組的傳輸，確保網(wǎng)站的真實(shí)性哄辣。

http 和 https 的區(qū)別：

http傳輸?shù)臄?shù)據(jù)都是未加密的请梢，也就是明文的，網(wǎng)景公司設(shè)置了 SSL協(xié)議來(lái)對(duì)http協(xié)議傳輸?shù)臄?shù)據(jù)進(jìn)行加密處理力穗，簡(jiǎn)單來(lái)說(shuō)https協(xié)議是由http和ssl協(xié)議構(gòu)建的可進(jìn)行加密傳輸和身份認(rèn)證的網(wǎng)絡(luò)協(xié)議毅弧，比 http協(xié)議的安全性更高。
主要的區(qū)別如下：

1. Https協(xié)議需要ca 證書(shū)当窗，費(fèi)用較高够坐。
2. http 是超文本傳輸協(xié)議，信息是明文傳輸崖面，https則是具有安全性的 ssl 加密傳輸協(xié)議元咙。
3. 使用不同的鏈接方式，端口也不同巫员，一般而言庶香，http協(xié)議的端口為 80，https 的端口為443
4. http的連接很簡(jiǎn)單简识，是無(wú)狀態(tài)的赶掖；HTTPS協(xié)議是由 SSL+HTTP 協(xié)議構(gòu)建的可進(jìn)行加密傳輸感猛、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，比http協(xié)議安全奢赂。

https 協(xié)議的工作原理

客戶端在使用 HTTPS方式與 Web服務(wù)器通信時(shí)有以下幾個(gè)步驟：

1. 客戶使用 https url訪問(wèn)服務(wù)器陪白，則要求 web服務(wù)器建立ssl鏈接。web服務(wù)器接收到客戶端的請(qǐng)求之后呈驶，會(huì)將網(wǎng)站的證書(shū)（證書(shū)中包含了公鑰）拷泽，返回或者說(shuō)傳輸給客戶端。
2. 客戶端和 web服務(wù)器端開(kāi)始協(xié)商 SSL鏈接的安全等級(jí)袖瞻，也就是加密等級(jí)司致。
3. 客戶端瀏覽器通過(guò)雙方協(xié)商一致的安全等級(jí)，建立會(huì)話密鑰聋迎，然后通過(guò)網(wǎng)站的公鑰來(lái)加密會(huì)話密鑰脂矫，并傳送給網(wǎng)站。
4. web 服務(wù)器通過(guò)自己的私鑰解密出會(huì)話密鑰霉晕。
5. web服務(wù)器通過(guò)會(huì)話密鑰加密與客戶端之間的通信庭再。

https 協(xié)議的優(yōu)點(diǎn)

1. 使用HTTPS協(xié)議可認(rèn)證用戶和服務(wù)器，確保數(shù)據(jù)發(fā)送到正確的客戶機(jī)和服務(wù)器牺堰；
2. HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸拄轻、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比http協(xié)議安全伟葫，可防止數(shù)據(jù)在傳輸過(guò)程中不被竊取恨搓、改變，確保數(shù)據(jù)的完整性筏养。
3. HTTPS是現(xiàn)行架構(gòu)下最安全的解決方案斧抱，雖然不是絕對(duì)安全，但它大幅增加了中間人攻擊的成本渐溶。
4. 谷歌曾在 2014年 8 月份調(diào)整搜索引擎算法辉浦，并稱(chēng)“比起同等 HTTP 網(wǎng)站，采用HTTPS加密的網(wǎng)站在搜索結(jié)果中的排名將會(huì)更高”茎辐。

https 協(xié)議的缺點(diǎn)

1. https握手階段比較費(fèi)時(shí)宪郊，會(huì)使頁(yè)面加載時(shí)間延長(zhǎng)50%，增加 10%~20%的耗電拖陆。
2. https緩存不如 http 高效弛槐，會(huì)增加數(shù)據(jù)開(kāi)銷(xiāo)。
3. SSL證書(shū)也需要錢(qián)慕蔚，功能越強(qiáng)大的證書(shū)費(fèi)用越高丐黄。
4. SSL 證書(shū)需要綁定IP斋配，不能再同一個(gè) ip 上綁定多個(gè)域名孔飒，ipv4資源支持不了這種消耗灌闺。

2. TCP和UDP的區(qū)別

1. TCP 是面向連接的；UDP 是無(wú)連接的坏瞄，即發(fā)送數(shù)據(jù)前不需要先建立鏈接桂对。
2. TCP提供可靠的服務(wù)。也就是說(shuō)鸠匀，通過(guò)TCP連接傳送的數(shù)據(jù)蕉斜，無(wú)差錯(cuò)，不丟失缀棍，不重復(fù)宅此，且按序到達(dá);UDP 盡最大努力交付，即不保證可靠交付爬范。 并且因?yàn)?code>TCP可靠父腕，面向連接，不會(huì)丟失數(shù)據(jù)因此適合大數(shù)據(jù)量的交換翩瓜。
3. TCP是面向字節(jié)流聪廉，UDP 面向報(bào)文终息，并且網(wǎng)絡(luò)出現(xiàn)擁塞不會(huì)使得發(fā)送速率降低（因此會(huì)出現(xiàn)丟包，對(duì)實(shí)時(shí)的應(yīng)用比如 IP電話和視頻會(huì)議等）枝嘶。
4. TCP 只能是 1 對(duì) 1 的，UDP 支持 1 對(duì) 1,1 對(duì)多哑诊。
5. TCP的首部長(zhǎng)度較大為 20 字節(jié)群扶，而 UDP 只有 8 字節(jié)。
6. TCP是面向連接的可靠性傳輸搭儒，而UDP是不可靠的穷当。

3. WebSocket 的實(shí)現(xiàn)和應(yīng)用

什么是 WebSocket

WebSocket是 HTML5 中的協(xié)議，支持持久連續(xù)淹禾，http 協(xié)議不支持持久性連接馁菜。Http1.0和HTTP1.1都不支持持久性的鏈接，HTTP1.1中的 keep-alive铃岔，將多個(gè) http 請(qǐng)求合并為1個(gè)

WebSocket 是什么樣的協(xié)議汪疮，具體有什么優(yōu)點(diǎn)？

HTTP的生命周期通過(guò) Request來(lái)界定毁习，也就是 Request 一個(gè) Response智嚷，那么在Http1.0協(xié)議中，這次 Http請(qǐng)求就結(jié)束了纺且。在 Http1.1中進(jìn)行了改進(jìn)盏道，是的有一個(gè)connection：Keep-alive，也就是說(shuō)载碌，在一個(gè) Http 連接中猜嘱，可以發(fā)送多個(gè) Request衅枫，接收多個(gè) Response。但是必須記住朗伶，在Http 中一個(gè) Request只能對(duì)應(yīng)有一個(gè) Response弦撩，而且這個(gè)Response是被動(dòng)的，不能主動(dòng)發(fā)起论皆。

WebSocket是基于 Http協(xié)議的益楼，或者說(shuō)借用了Http 協(xié)議來(lái)完成一部分握手，在握手階段與Http 是相同的点晴。我們來(lái)看一個(gè) websocket 握手協(xié)議的實(shí)現(xiàn)感凤，基本是2個(gè)屬性，upgrade粒督、connection俊扭。
基本請(qǐng)求如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

多了下面2個(gè)屬性：

Upgrade:webSocket
Connection:Upgrade

告訴服務(wù)器發(fā)送的是websocket

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

4.說(shuō)說(shuō)drag api

1. dragstart：事件主體是被拖放元素，在開(kāi)始拖放被拖放元素時(shí)觸發(fā)
2. darg：事件主體是被拖放元素坠陈，在正在拖放被拖放元素時(shí)觸發(fā)
3. dragenter：事件主體是目標(biāo)元素萨惑，在被拖放元素進(jìn)入某元素時(shí)觸發(fā)
4. dragover：事件主體是目標(biāo)元素，在被拖放在某元素內(nèi)移動(dòng)時(shí)觸發(fā)
5. dragleave：事件主體是目標(biāo)元素仇矾，在被拖放元素移出目標(biāo)元素是觸發(fā)
6. drop：事件主體是目標(biāo)元素庸蔼，在目標(biāo)元素完全接受被拖放元素時(shí)觸發(fā)
7. dragend：事件主體是被拖放元素，在整個(gè)拖放操作結(jié)束時(shí)觸發(fā)

5.說(shuō)一下 http2.0

1. http2.0 是基于1999年發(fā)布的http1.0之后的首次更新贮匕。
2. 提升訪問(wèn)速度姐仅；相比 http1.0，請(qǐng)求資源所需時(shí)間更少刻盐，訪問(wèn)速度更快
3. 允許多路復(fù)用掏膏；多路復(fù)用允許同時(shí)通過(guò)單一的 HTTP/2連接發(fā)送多重請(qǐng)求-響應(yīng)信息。改善了：在 http1中敦锌，瀏覽器客戶端在同一時(shí)間馒疹，針對(duì)同一域名下的請(qǐng)求有一定數(shù)量限制（連接數(shù)量），超過(guò)限制會(huì)被阻塞
4. 二進(jìn)制分幀：HTTP2.0會(huì)將所有的傳輸信息分割為更小的信息或者幀乙墙，并對(duì)他們進(jìn)行二進(jìn)制編碼
5. 首部壓縮颖变；http2以前的頭部報(bào)文都是文本形式發(fā)生，http2為了優(yōu)化網(wǎng)絡(luò)對(duì)頭部報(bào)文進(jìn)行壓縮編碼使其內(nèi)容更精簡(jiǎn)听想，發(fā)送更少的數(shù)據(jù)加快網(wǎng)絡(luò)傳輸
6. 服務(wù)器端推送腥刹；為了改善延遲，HTTP/2引入了server push汉买，它允許服務(wù)端推送資源給瀏覽器衔峰。一個(gè)服務(wù)器經(jīng)常知道一個(gè)頁(yè)面需要很多附加資源，在它響應(yīng)瀏覽器第一個(gè)請(qǐng)求的時(shí)候，可以開(kāi)始推送這些資源垫卤。這允許服務(wù)端去完全充分地利用一個(gè)可能空閑的網(wǎng)絡(luò)邻吞，改善頁(yè)面加載時(shí)間

6.400和401、403狀態(tài)碼

1. 400：請(qǐng)求無(wú)效
   產(chǎn)生原因：
   （1）前端提交數(shù)據(jù)的字段名稱(chēng)和字段類(lèi)型與后臺(tái)的實(shí)體沒(méi)有保持一致葫男；
   （2）前端提交到后臺(tái)的數(shù)據(jù)應(yīng)該是 json 字符串類(lèi)型，但是前端沒(méi)有將對(duì)象轉(zhuǎn)化成字符串崔列；
   對(duì)應(yīng)的解決方法：
   （1）對(duì)照字段的名稱(chēng)梢褐，保持一致性
   （2）將 obj 對(duì)象通過(guò) JSON.stringify 實(shí)現(xiàn)序列化
2. 401：當(dāng)前請(qǐng)求需要用戶驗(yàn)證
3. 403：服務(wù)器已經(jīng)得到請(qǐng)求，但是拒絕執(zhí)行

7.說(shuō)說(shuō)fetch 發(fā)送 2 次請(qǐng)求的原因

fetch發(fā)送post 請(qǐng)求的時(shí)候赵讯，總是發(fā)送2次盈咳，第一次狀態(tài)碼是 204，第二次才成功边翼。
原因很簡(jiǎn)單鱼响，因?yàn)槟阌?fetch的 post請(qǐng)求的時(shí)候，導(dǎo)致fetch第一次發(fā)送了一個(gè) Options請(qǐng)求组底，詢問(wèn)服務(wù)器是否支持修改的請(qǐng)求頭丈积，如果服務(wù)器支持，則第二次才發(fā)送真正的請(qǐng)求

8.說(shuō)說(shuō)cookie债鸡、sessionStorage江滨、localStorage

共同點(diǎn)：都是保存在瀏覽器端，并且是同源的

cookie 數(shù)據(jù)始終在同源的 http請(qǐng)求中攜帶（即使不需要）厌均，即 cookie在瀏覽器和服務(wù)器間來(lái)回傳遞唬滑。而 sessionStorage和 localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存棺弊。cookie數(shù)據(jù)還有路徑（path）的概念晶密，可以限制cookie只屬于某個(gè)路徑下, 存儲(chǔ)的大小很小只有 4K左右。 （key：可以在瀏覽器和服務(wù)器端來(lái)回傳遞模她，存儲(chǔ)容量小稻艰，只有大約 4K 左右）

sessionStorage僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持侈净，localStorage：始終有效连锯，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)用狱；cookie只在設(shè)置的 cookie過(guò)期時(shí)間之前一直有效运怖，即使窗口或?yàn)g覽器關(guān)閉。（key：本身就是一個(gè)回話過(guò)程夏伊，關(guān)閉瀏覽器后消失摇展，session為一個(gè)回話，當(dāng)頁(yè)面不同即使是同一頁(yè)面打開(kāi)兩次溺忧，也被視為同一次回話）

localStorage在所有同源窗口中都是共享的咏连；cookie也是在所有同源窗口中都是共享的盯孙。（key：同源窗口都會(huì)共享，并且不會(huì)失效祟滴，不管窗口或者瀏覽器關(guān)閉與否都會(huì)始終生效）

9. 對(duì) HTML 語(yǔ)義化標(biāo)簽的理解

HTML5語(yǔ)義化標(biāo)簽是指正確的標(biāo)簽包含了正確的內(nèi)容振惰，結(jié)構(gòu)良好，便于閱讀垄懂，比如 nav表示導(dǎo)航條骑晶，類(lèi)似的還有article、header草慧、footer 等等標(biāo)簽桶蛔。

10. 聊聊iframe

1. 定義：iframe 元素會(huì)創(chuàng)建包含另一個(gè)文檔的內(nèi)聯(lián)框架
2. 提示：可以將提示文字放在<iframe></iframe>之間，來(lái)提示某些不支持iframe的瀏覽器
3. 缺點(diǎn)：

• 會(huì)阻塞主頁(yè)面的 onload 事件
• 搜索引擎無(wú)法解讀這種頁(yè)面漫谷，不利于 SEO
• iframe 和主頁(yè)面共享連接池仔雷，而瀏覽器對(duì)相同區(qū)域有限制所以會(huì)影響性能。

11. 說(shuō)說(shuō)Doctype的作用

Doctype聲明于文檔最前面舔示，告訴瀏覽器以何種方式來(lái)渲染頁(yè)面碟婆，這里有兩種模式，嚴(yán)格模式和混雜模式
嚴(yán)格模式的排版和JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行
混雜模式惕稻，向后兼容脑融，模擬老式瀏覽器，防止瀏覽器無(wú)法兼容頁(yè)面

12. Cookie如何防范 XSS 攻擊

XSS（跨站腳本攻擊）是指攻擊者在返回的 HTML中嵌入javascript腳本

為了減輕這些攻擊缩宜，需要在HTTP頭部配上set-cookie：

1. httponly-這個(gè)屬性可以防止 XSS,它會(huì)禁止javascript腳本來(lái)訪問(wèn) cookie
2. secure - 這個(gè)屬性告訴瀏覽器僅在請(qǐng)求為 https的時(shí)候發(fā)送cookie

13. addEventListener如何使用

格式：ele.addEventListener(事件類(lèi)型,處理函數(shù),false)
例如：

odiv.addEventListener('click',function(e){
    console.log(1);
},false)
odiv.addEventListener('click',function(e){
    console.log(2);
},false)

特點(diǎn)：通過(guò)addEventListener綁定的方式肘迎，同個(gè)元素的同一個(gè)事件可以綁定多個(gè)處理函數(shù)，不會(huì)被覆蓋
注意：IE9以下不兼容

14. 說(shuō)說(shuō)cookie和session的區(qū)別

1. cookie數(shù)據(jù)存放在客戶的瀏覽器上锻煌，session 數(shù)據(jù)放在服務(wù)器上
2. cookie 不是很安全妓布，別人可以分析存放在本地的 cookie并進(jìn)行 cookie欺騙，考慮到安全應(yīng)當(dāng)使用session
3. session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上宋梧。當(dāng)訪問(wèn)增多匣沼，會(huì)比較占用你服務(wù)器的性能
   考慮到減輕服務(wù)器性能方面，應(yīng)當(dāng)使用 cookie
4. 單個(gè) cookie保存的數(shù)據(jù)不能超過(guò)4KB捂龄，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè)cookie

15. 說(shuō)說(shuō)http返回的狀態(tài)碼

100 Continue繼續(xù)释涛。客戶端應(yīng)繼續(xù)其請(qǐng)求
101 Switching Protocols切換協(xié)議倦沧。服務(wù)器根據(jù)客戶端的請(qǐng)求切換協(xié)議唇撬。只能切換到更高級(jí)的協(xié)議，例如展融，切換到 HTTP 的新版本協(xié)議
200 OK 請(qǐng)求成功窖认。一般用于GET 與 POST 請(qǐng)求
201 Created 已創(chuàng)建。成功請(qǐng)求并創(chuàng)建了新的資源
202 Accepted 已接受。已經(jīng)接受請(qǐng)求扑浸，但未處理完成
203 Non-Authoritative Information 非授權(quán)信息烧给。請(qǐng)求成功。但返回的 meta信息不在原始的服務(wù)器喝噪，而是一個(gè)副本
204 No Content無(wú)內(nèi)容础嫡。服務(wù)器成功處理，但未返回內(nèi)容酝惧。在未更新網(wǎng)頁(yè)的情況下榴鼎，可確保瀏覽器繼續(xù)顯示當(dāng)前文檔
205 Reset Content重置內(nèi)容。服務(wù)器處理成功系奉，用戶終端（例如：瀏覽器）應(yīng)重置文檔視圖」昧可通過(guò)此返回碼清除瀏覽器的表單域
206 Partial Content部分內(nèi)容缺亮。服務(wù)器成功處理了部分 GET 請(qǐng)求
300 Multiple Choices多種選擇。請(qǐng)求的資源可包括多個(gè)位置桥言，相應(yīng)可返回一個(gè)資源特征與地址的列表用于用戶終端（例如：瀏覽器）選擇
301 Moved Permanently 永久移動(dòng)萌踱。請(qǐng)求的資源已被永久的移動(dòng)到新 URI，返回信息會(huì)包括新的 URI号阿，瀏覽器會(huì)自動(dòng)定向到新 URI并鸵。今后任何新的請(qǐng)求都應(yīng)使用新的URI代替
302 Found臨時(shí)移動(dòng)。與 301類(lèi)似扔涧。但資源只是臨時(shí)被移動(dòng)园担。客戶端應(yīng)繼續(xù)使用原有URI
303 See Other 查看其它地址枯夜。與301 類(lèi)似弯汰。使用 GET 和POST請(qǐng)求查看
304 Not Modified 未修改。所請(qǐng)求的資源未修改湖雹，服務(wù)器返回此狀態(tài)碼時(shí)咏闪，不會(huì)返回任何資源∷だ簦客戶端通常會(huì)緩存訪問(wèn)過(guò)的資源鸽嫂，通過(guò)提供一個(gè)頭信息指出客戶端希望只返回在指定日期之后修改的資源
305 Use Proxy 使用代理。所請(qǐng)求的資源必須通過(guò)代理訪問(wèn)
306 Unused已經(jīng)被廢棄的HTTP 狀態(tài)碼
307 Temporary Redirect 臨時(shí)重定向征讲。與 302 類(lèi)似据某。使用 GET請(qǐng)求重定向
400 Bad Request 客戶端請(qǐng)求的語(yǔ)法錯(cuò)誤，服務(wù)器無(wú)法理解
401 Unauthorized 請(qǐng)求要求用戶的身份認(rèn)證
402 Payment Required保留诗箍，將來(lái)使用
403 Forbidden 服務(wù)器理解請(qǐng)求客戶端的請(qǐng)求哗脖，但是拒絕執(zhí)行此請(qǐng)求
404 Not Found服務(wù)器無(wú)法根據(jù)客戶端的請(qǐng)求找到資源（網(wǎng)頁(yè)）。通過(guò)此代碼，網(wǎng)站設(shè)計(jì)人員可設(shè)置"您所請(qǐng)求的資源無(wú)法找到"的個(gè)性頁(yè)面
405 Method Not Allowed 客戶端請(qǐng)求中的方法被禁止
406 Not Acceptable 服務(wù)器無(wú)法根據(jù)客戶端請(qǐng)求的內(nèi)容特性完成請(qǐng)求
407 Proxy Authentication Required 請(qǐng)求要求代理的身份認(rèn)證才避，與 401 類(lèi)似橱夭，但請(qǐng)求者應(yīng)當(dāng)使用代理進(jìn)行授權(quán)
408 Request Time-out 服務(wù)器等待客戶端發(fā)送的請(qǐng)求時(shí)間過(guò)長(zhǎng)，超時(shí)
409 Conflict 服務(wù)器完成客戶端的 PUT 請(qǐng)求是可能返回此代碼桑逝，服務(wù)器處理請(qǐng)求時(shí)發(fā)生了沖突
410 Gone客戶端請(qǐng)求的資源已經(jīng)不存在棘劣。410 不同于 404，如果資源以前有現(xiàn)在被永久刪除了可使用 410 代碼楞遏，網(wǎng)站設(shè)計(jì)人員可通過(guò) 301 代碼指定資源的新位置
411 Length Required 服務(wù)器無(wú)法處理客戶端發(fā)送的不帶Content-Length 的請(qǐng)求信息
412 Precondition Failed 客戶端請(qǐng)求信息的先決條件錯(cuò)誤
413 Request Entity Too Large 由于請(qǐng)求的實(shí)體過(guò)大茬暇，服務(wù)器無(wú)法處理，因此拒絕請(qǐng)求寡喝。為防止客戶端的連續(xù)請(qǐng)求糙俗，服務(wù)器可能會(huì)關(guān)閉連接。如果只是服務(wù)器暫時(shí)無(wú)法處理预鬓，則會(huì)包含一個(gè)Retry-After 的響應(yīng)信息
414 Request-URI Too Large請(qǐng)求的 URI 過(guò)長(zhǎng)（URI 通常為網(wǎng)址）巧骚，服務(wù)器無(wú)法處理
415 Unsupported Media Type 服務(wù)器無(wú)法處理請(qǐng)求附帶的媒體格式
416 Requested range not satisfiable 客戶端請(qǐng)求的范圍無(wú)效
417 Expectation Failed 服務(wù)器無(wú)法滿足Expect的請(qǐng)求頭信息
500 Internal Server Error 服務(wù)器內(nèi)部錯(cuò)誤，無(wú)法完成請(qǐng)求
501 Not Implemented服務(wù)器不支持請(qǐng)求的功能格二，無(wú)法完成請(qǐng)求
502 Bad Gateway 作為網(wǎng)關(guān)或者代理工作的服務(wù)器嘗試執(zhí)行請(qǐng)求時(shí)劈彪，從遠(yuǎn)程服務(wù)器接收到了一個(gè)無(wú)效的響應(yīng)
503 Service Unavailable 由于超載或系統(tǒng)維護(hù)，服務(wù)器暫時(shí)的無(wú)法處理客戶端的請(qǐng)求顶猜。延時(shí)的長(zhǎng)度可包含在服務(wù)器的 Retry-After頭信息中
504 Gateway Time-out充當(dāng)網(wǎng)關(guān)或代理的服務(wù)器沧奴，未及時(shí)從遠(yuǎn)端服務(wù)器獲取請(qǐng)求
505 HTTP Version not supported 服務(wù)器不支持請(qǐng)求的 HTTP協(xié)議的版本，無(wú)法完成處理

16. 說(shuō)說(shuō)http常用請(qǐng)求頭

Accept
可接受的響應(yīng)內(nèi)容類(lèi)型（Content-Types）
Accept-Charset
可接受的字符集
Accept-Encoding
可接受的響應(yīng)內(nèi)容的編碼方式长窄。
Accept-Language
可接受的響應(yīng)內(nèi)容語(yǔ)言列表滔吠。
Accept-Datetime
可接受的按照時(shí)間來(lái)表示的響應(yīng)內(nèi)容版本
Authorization
用于表示 HTTP 協(xié)議中需要認(rèn)證資源的認(rèn)證信息
Cache-Control
用來(lái)指定當(dāng)前的請(qǐng)求/回復(fù)中的，是否使用緩存機(jī)制挠日。
Connection
客戶端（瀏覽器）想要優(yōu)先使用的連接類(lèi)型
Cookie
由之前服務(wù)器通過(guò)Set-Cooki（e 見(jiàn)下文）設(shè)置的一個(gè)HTTP協(xié)議Cookie
Content-Length
以 8 進(jìn)制表示的請(qǐng)求體的長(zhǎng)度
Content-MD5
請(qǐng)求體的內(nèi)容的二進(jìn)制 MD5 散列值（數(shù)字簽名）屠凶，以 Base64 編碼的結(jié)果
Content-Type
請(qǐng)求體的 MIME 類(lèi)型 （用于 POST 和 PUT 請(qǐng)求中）
Date
發(fā)送該消息的日期和時(shí)間（以 RFC 7231 中定義的"HTTP 日期"格式來(lái)發(fā)送）
Expect
表示客戶端要求服務(wù)器做出特定的行為
From
發(fā)起此請(qǐng)求的用戶的郵件地址
Host
表示服務(wù)器的域名以及服務(wù)器所監(jiān)聽(tīng)的端口號(hào)。如果所請(qǐng)求的端口是對(duì)應(yīng)的服務(wù)的標(biāo)準(zhǔn)端口（80）肆资，則端口號(hào)可以省略矗愧。
If-Match
僅當(dāng)客戶端提供的實(shí)體與服務(wù)器上對(duì)應(yīng)的實(shí)體相匹配時(shí)，才進(jìn)行對(duì)應(yīng)的操作郑原。主要用于像 PUT 這樣的方法中唉韭，僅當(dāng)從用戶上次更新某個(gè)資源后，該資源未被修改的情況下犯犁，才更新該資源属愤。
If-Modified-Since
允許在對(duì)應(yīng)的資源未被修改的情況下返回 304 未修改
If-None-Match
允許在對(duì)應(yīng)的內(nèi)容未被修改的情況下返回 304 未修改（ 304 Not Modified ），參考 超文本傳輸協(xié)議 的實(shí)體標(biāo)記
If-Range
如果該實(shí)體未被修改過(guò)酸役，則向返回所缺少的那一個(gè)或多個(gè)部分住诸。否則驾胆，返回整個(gè)新的實(shí)體
If-Unmodified-Since
僅當(dāng)該實(shí)體自某個(gè)特定時(shí)間以來(lái)未被修改的情況下，才發(fā)送回應(yīng)贱呐。
Max-Forwards限制該消息可被代理及網(wǎng)關(guān)轉(zhuǎn)發(fā)的次數(shù)丧诺。
Origin
發(fā)起一個(gè)針對(duì)跨域資源共享的請(qǐng)求（該請(qǐng)求要求服務(wù)器在響應(yīng)中加入一個(gè) Access-Control-Allow-Origin 的消息頭，表示訪問(wèn)控制所允許的來(lái)源）奄薇。
Pragma
與具體的實(shí)現(xiàn)相關(guān)驳阎，這些字段可能在請(qǐng)求/回應(yīng)鏈中的任何時(shí)候產(chǎn)生。
Proxy-Authorization
用于向代理進(jìn)行認(rèn)證的認(rèn)證信息馁蒂。
Range
表示請(qǐng)求某個(gè)實(shí)體的一部分呵晚，字節(jié)偏移以 0 開(kāi)始。
Referer
表示瀏覽器所訪問(wèn)的前一個(gè)頁(yè)面沫屡，可以認(rèn)為是之前訪問(wèn)頁(yè)面的鏈接將瀏覽器帶到了當(dāng)前頁(yè)面饵隙。Referer 其實(shí)是 Referrer 這個(gè)單詞，但 RFC制作標(biāo)準(zhǔn)時(shí)給拼錯(cuò)了沮脖，后來(lái)也就將錯(cuò)就錯(cuò)使用 Referer 了金矛。
TE
瀏覽器預(yù)期接受的傳輸時(shí)的編碼方式：可使用回應(yīng)協(xié)議頭
Transfer-Encoding
中的值（還可以使用"trailers"表示數(shù)據(jù)傳輸時(shí)的分塊方式）用來(lái)表示瀏覽器希望在最后一個(gè)大小為 0 的塊之后還接收到一些額外的字段。
User-Agent
瀏覽器的身份標(biāo)識(shí)字符串
Upgrade
要求服務(wù)器升級(jí)到一個(gè)高版本協(xié)議倘潜。
Via
告訴服務(wù)器绷柒，這個(gè)請(qǐng)求是由哪些代理發(fā)出的志于。
Warning
一個(gè)一般性的警告涮因，表示在實(shí)體內(nèi)容體中可能存在錯(cuò)誤。

17. 說(shuō)說(shuō)強(qiáng)緩存和協(xié)商緩存

緩存分為兩種：強(qiáng)緩存和協(xié)商緩存伺绽，根據(jù)響應(yīng)的header內(nèi)容來(lái)決定

強(qiáng)緩存和協(xié)商緩存獲取資源形式都是從緩存取

但养泡，強(qiáng)緩存是不發(fā)送請(qǐng)求到服務(wù)器，直接從緩存取奈应，狀態(tài)碼是200（from cache）澜掩；
而協(xié)議緩存是發(fā)送請(qǐng)求到服務(wù)器，通過(guò)服務(wù)器來(lái)告知緩存是否可用杖挣，可用在從緩存取肩榕，狀態(tài)碼是304（not modified）

強(qiáng)緩存相關(guān)字段有 expires，cache-control惩妇。如果 cache-control與expires同時(shí)存在的話株汉，cache-control的優(yōu)先級(jí)高于expires
協(xié)商緩存相關(guān)字段有Last-Modified/If-Modified-Since，Etag/If-None-Match

18. 簡(jiǎn)單說(shuō)說(shuō)前端優(yōu)化方案

這個(gè)一個(gè)超級(jí)大的問(wèn)題歌殃，這里簡(jiǎn)單總結(jié)

降低請(qǐng)求量：合并資源乔妈，減少HTTP請(qǐng)求數(shù)，minify / gzip壓縮氓皱，webP路召，lazyLoad

加快請(qǐng)求速度：預(yù)解析 DNS勃刨，減少域名數(shù)，并行加載股淡，CDN分發(fā)

緩存：HTTP 協(xié)議緩存請(qǐng)求身隐，離線緩存manifest，離線數(shù)據(jù)緩存 localStorage

渲染：JS/CSS 優(yōu)化揣非，加載順序抡医，服務(wù)端渲染，pipeline

19. 說(shuō)說(shuō)GET 和 POST 的區(qū)別

1. get參數(shù)通過(guò) url傳遞早敬，post 放在 request body中
2. get請(qǐng)求在url中傳遞的參數(shù)是有長(zhǎng)度限制的忌傻，而 post沒(méi)有
3. get比 post更不安全，因?yàn)閰?shù)直接暴露在 url中搞监，所以不能用來(lái)傳遞敏感信息
4. get請(qǐng)求只能進(jìn)行 url 編碼水孩，而 post支持多種編碼方式
5. get請(qǐng)求會(huì)瀏覽器主動(dòng) cache，而 post支持多種編碼方式
6. get 請(qǐng)求參數(shù)會(huì)被完整保留在瀏覽歷史記錄里琐驴，而 post中的參數(shù)不會(huì)被保留
7. get 和post本質(zhì)上就是TCP鏈接俘种，并無(wú)差別。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制绝淡，導(dǎo)致他們?cè)趹?yīng)用過(guò)程中體現(xiàn)出一些不同宙刘。get產(chǎn)生一個(gè) TCP 數(shù)據(jù)包；post產(chǎn)生兩個(gè) TCP數(shù)據(jù)包

20. 狀態(tài)碼 304 和 200

狀態(tài)碼 200：請(qǐng)求已成功牢酵，請(qǐng)求所希望的響應(yīng)頭或數(shù)據(jù)體將隨此響應(yīng)返回悬包。即返回的數(shù)據(jù)為全量的數(shù)據(jù)，如果文件不通過(guò)GZIP壓縮的話馍乙，文件是多大布近，則要有多大傳輸量

狀態(tài)碼 304：如果客戶端發(fā)送了一個(gè)帶條件的 GET 請(qǐng)求且該請(qǐng)求已被允許，而文檔的內(nèi)容（自上次訪問(wèn)以來(lái)或者根據(jù)請(qǐng)求的條件）并沒(méi)有改變丝格，則服務(wù)器應(yīng)當(dāng)返回這個(gè)狀態(tài)碼撑瞧。即客戶端和服務(wù)器端只需要傳輸很少的數(shù)據(jù)量來(lái)做文件的校驗(yàn)，如果文件沒(méi)有修改過(guò)显蝌，則不需要返回全量的數(shù)據(jù)

21. CSS畫(huà)一個(gè)三角形

三角形原理：邊框的均分原理

div {
  width:0px;
  height:0px;
  border-top:10px solid red;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid transparent;
}

22. H5有哪些新增的元素

首先html5為了更好的實(shí)踐 web語(yǔ)義化预伺，增加了 header，footer曼尊，nav,aside,section 等語(yǔ)義化標(biāo)簽酬诀，在表單方面，為了增強(qiáng)表單涩禀，為input增加了 color料滥，emial,data ,range等類(lèi)型，在存儲(chǔ)方面艾船，提供了 sessionStorage葵腹，localStorage和離線存儲(chǔ)高每，通過(guò)這些存儲(chǔ)方式方便數(shù)據(jù)在客戶端的存儲(chǔ)和獲取，在多媒體方面規(guī)定了音頻和視頻元素audio和vedio践宴，另外還有地理定位鲸匿，canvas畫(huà)布，拖放阻肩，多線程編程的web worker和 websocket 協(xié)議

23. 在地址欄里輸入一個(gè) URL,到這個(gè)頁(yè)面呈現(xiàn)出來(lái)带欢，中間會(huì)發(fā)生什么？

輸入url后烤惊，首先需要找到這個(gè)url域名的服務(wù)器ip,為了尋找這個(gè) ip乔煞，瀏覽器首先會(huì)尋找緩存，查看緩存中是否有記錄柒室，緩存的查找記錄為：瀏覽器緩存-》系統(tǒng)緩存-》路由器緩存渡贾，緩存中沒(méi)有則查找系統(tǒng)的 hosts文件中是否有記錄，如果沒(méi)有則查詢DNS 服務(wù)器雄右。得到服務(wù)器的ip地址后空骚，瀏覽器根據(jù)這個(gè)ip 以及相應(yīng)的端口號(hào)，構(gòu)造一個(gè)http請(qǐng)求擂仍，這個(gè)請(qǐng)求報(bào)文會(huì)包括這次請(qǐng)求的信息囤屹，主要是請(qǐng)求方法，請(qǐng)求說(shuō)明和請(qǐng)求附帶的數(shù)據(jù)逢渔，并將這個(gè) http請(qǐng)求封裝在一個(gè)tcp 包中肋坚，這個(gè)tcp包會(huì)依次經(jīng)過(guò)傳輸層，網(wǎng)絡(luò)層复局，數(shù)據(jù)鏈路層冲簿，物理層到達(dá)服務(wù)器粟判，服務(wù)器解析這個(gè)請(qǐng)求來(lái)作出響應(yīng)亿昏，返回相應(yīng)的 html給瀏覽器。因?yàn)?html是一個(gè)樹(shù)形結(jié)構(gòu)档礁，瀏覽器根據(jù)這個(gè)html 來(lái)構(gòu)建 DOM 樹(shù)角钩，在 dom樹(shù)的構(gòu)建過(guò)程中如果遇到 JS腳本和外部JS連接，則會(huì)停止構(gòu)建DOM 樹(shù)來(lái)執(zhí)行和下載相應(yīng)的代碼呻澜，這會(huì)造成阻塞递礼，這就是為什么推薦 JS代碼應(yīng)該放在html代碼的后面，之后根據(jù)外部樣式羹幸，內(nèi)部樣式脊髓，內(nèi)聯(lián)樣式構(gòu)建一個(gè)CSS對(duì)象模型樹(shù) CSSOM樹(shù)，構(gòu)建完成后和DOM樹(shù)合并為渲染樹(shù)栅受，這里主要做的是排除非視覺(jué)節(jié)點(diǎn)将硝，比如script恭朗，meta標(biāo)簽和排除 display為 none的節(jié)點(diǎn)，之后進(jìn)行布局依疼，布局主要是確定各個(gè)元素的位置和尺寸痰腮，之后是渲染頁(yè)面，因?yàn)?html文件中會(huì)含有圖片律罢，視頻膀值，音頻等資源，在解析 DOM的過(guò)程中误辑，遇到這些都會(huì)進(jìn)行并行下載沧踏，瀏覽器對(duì)每個(gè)域的并行下載數(shù)量有一定的限制，一般是 4-6 個(gè)巾钉，當(dāng)然在這些所有的請(qǐng)求中我們還需要關(guān)注的就是緩存悦冀，緩存一般通過(guò)Cache-Control、Last-Modify睛琳、Expires等首部字段控制盒蟆。 Cache-Control 和Expires 的區(qū)別在于 Cache-Control使用相對(duì)時(shí)間，Expires使用的是基于服務(wù)器 端的絕對(duì)時(shí)間师骗，因?yàn)榇嬖跁r(shí)差問(wèn)題历等，一般采用Cache-Control，在請(qǐng)求這些有設(shè)置了緩存的數(shù)據(jù)時(shí)辟癌，會(huì)先 查看是否過(guò)期寒屯，如果沒(méi)有過(guò)期則直接使用本地緩存，過(guò)期則請(qǐng)求并在服務(wù)器校驗(yàn)文件是否修改黍少，如果上一次 響應(yīng)設(shè)置了 ETag值會(huì)在這次請(qǐng)求的時(shí)候作為If-None-Match的值交給服務(wù)器校驗(yàn)寡夹，如果一致，繼續(xù)校驗(yàn) Last-Modified厂置，沒(méi)有設(shè)置ETag則直接驗(yàn)證Last-Modified菩掏，再?zèng)Q定是否返回 304

24. cache-control 的值有哪些

cache-control是一個(gè)通用消息頭字段被用于 HTTP請(qǐng)求和響應(yīng)中，通過(guò)指定指令來(lái)實(shí)現(xiàn)緩存機(jī)制昵济，這個(gè)緩存指令是單向的智绸，常見(jiàn)的取值有private、no-cache访忿、max-age瞧栗、must-revalidate等，默認(rèn)為 private

25. 瀏覽器在生成頁(yè)面的時(shí)會(huì)生成哪兩顆樹(shù)

構(gòu)造兩棵樹(shù)海铆，DOM 樹(shù)和 CSSOM 規(guī)則樹(shù)

當(dāng)瀏覽器接收到服務(wù)器相應(yīng)來(lái)的 HTML 文檔后迹恐，會(huì)遍歷文檔節(jié)點(diǎn)，生成 DOM 樹(shù)卧斟，
CSSOM規(guī)則樹(shù)由瀏覽器解析 CSS文件生成

26. CSRF和XSS的網(wǎng)絡(luò)攻擊及防范

CSRF：跨站請(qǐng)求偽造殴边，可以理解為攻擊者盜用了用戶的身份通熄，以用戶的名義發(fā)送了惡意請(qǐng)求，比如用戶登錄了一個(gè)網(wǎng)站后找都，立刻在另一個(gè)tab頁(yè)面訪問(wèn)量攻擊者用來(lái)制造攻擊的網(wǎng)站唇辨，這個(gè)網(wǎng)站要求訪問(wèn)剛剛登陸的網(wǎng)站，并發(fā)送了一個(gè)惡意請(qǐng)求能耻，這時(shí)候 CSRF就產(chǎn)生了赏枚，比如這個(gè)制造攻擊的網(wǎng)站使用一張圖片，但是這種圖片的鏈接卻是可以修改數(shù)據(jù)庫(kù)的晓猛，這時(shí)候攻擊者就可以以用戶的名義操作這個(gè)數(shù)據(jù)庫(kù)饿幅，防御方式的話：使用驗(yàn)證碼，檢查 https頭部的refer戒职，使用 token

XSS：跨站腳本攻擊栗恩，是說(shuō)攻擊者通過(guò)注入惡意的腳本，在用戶瀏覽網(wǎng)頁(yè)的時(shí)候進(jìn)行攻擊洪燥，比如獲取cookie堡称，或者其他用戶身份信息诚撵，可以分為存儲(chǔ)型和反射型逻炊，存儲(chǔ)型是攻擊者輸入一些數(shù)據(jù)并且存儲(chǔ)到了數(shù)據(jù)庫(kù)中秤掌，其他瀏覽者看到的時(shí)候進(jìn)行攻擊，反射型的話不存儲(chǔ)在數(shù)據(jù)庫(kù)中再来，往往表現(xiàn)為將攻擊代碼放在url 地址的請(qǐng)求參數(shù)中蒙兰，防御的話為cookie設(shè)置 httpOnly 屬性，對(duì)用戶的輸入進(jìn)行檢查芒篷，進(jìn)行特殊字符過(guò)濾

27. 如何看網(wǎng)站的性能如何

檢測(cè)頁(yè)面加載時(shí)間一般有兩種方式：

1. 一種是被動(dòng)去測(cè)搜变；就是在被檢測(cè)的頁(yè)面置入腳本或探針，當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)時(shí)针炉，探針自動(dòng)采集數(shù)據(jù)并傳回?cái)?shù)據(jù)庫(kù)進(jìn)行分析挠他；
2. 另一種主動(dòng)監(jiān)測(cè)；即主動(dòng)的搭建分布式受控環(huán)境糊识，模擬用戶發(fā)起頁(yè)面訪問(wèn)請(qǐng)求绩社，主動(dòng)采集性能數(shù)據(jù)并分析摔蓝，在檢測(cè)的精準(zhǔn)度上赂苗，專(zhuān)業(yè)的第三方工具效果更佳，比如說(shuō)性能極客等

28. 說(shuō)說(shuō)HTTP 協(xié)議特征

HTTP是一個(gè)基于 TCP/IP通信協(xié)議來(lái)傳遞數(shù)據(jù)（HTML文件, 圖片文件, 查詢結(jié)果等）

HTTP是一個(gè)屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議贮尉，由于其簡(jiǎn)捷拌滋、快速的方式，適用于分布式超媒體信息系統(tǒng)猜谚。它于1990 年提出败砂，經(jīng)過(guò)幾年的使用與發(fā)展赌渣，得到不斷地完善和擴(kuò)展。目前在 WWW中使用的是HTTP/1.0的第六版昌犹，HTTP/1.1的規(guī)范化工作正在進(jìn)行之中坚芜，而且 HTTP-NG(Next Generation of HTTP)的建議已經(jīng)提出。HTTP協(xié)議工作于客戶端-服務(wù)端架構(gòu)為上斜姥。瀏覽器作為 HTTP 客戶端通過(guò) URL 向HTTP 服務(wù)端即 WEB服務(wù)器發(fā)送所有請(qǐng)求鸿竖。Web 服務(wù)器根據(jù)接收到的請(qǐng)求后，向客戶端發(fā)送響應(yīng)信息

29. 簡(jiǎn)述輸入 URL 到頁(yè)面加載顯示完成發(fā)生了什么

1. DNS 解析
2. TCP連接
3. 發(fā)送 HTTP 請(qǐng)求
4. 服務(wù)器處理請(qǐng)求并返回 HTTP報(bào)文
5. 瀏覽器解析渲染頁(yè)面
6. 連接結(jié)束

30. cookie的編碼方式

encodeURI()

31. 說(shuō)說(shuō)css 盒模型

這里說(shuō)的盒子本質(zhì)就是用于裝頁(yè)面上元素的矩形區(qū)域铸敏；CSS中的盒子模型有兩種缚忧，包括 IE盒模型和 W3C標(biāo)準(zhǔn)盒模型

兩種盒模型最主要的區(qū)別就是width 的包含范圍，在標(biāo)準(zhǔn)模型中杈笔，width 指 content部分的寬度闪水，在IE盒模型中，width 表示content+padding+border這三個(gè)部分的寬度蒙具，故這使得在計(jì)算整個(gè)盒子的寬度時(shí)存在著差異：

• 標(biāo)準(zhǔn)盒模型的盒子寬度：左右border+左右 padding+width
• IE盒模型的盒子寬度：width

在 CSS3中引入了box-sizing屬性球榆，box-sizing:content-box表示標(biāo)準(zhǔn)盒模型；box-sizing:border-box表示的是 IE盒模型禁筏；而box-sizing:padding-box這個(gè)屬性值的寬度包含了左右padding+width

32. link標(biāo)簽和@import 標(biāo)簽的區(qū)別

link標(biāo)簽和@import的區(qū)別：

1. link屬于html標(biāo)簽芜果，而@import 是 css提供的；
2. 頁(yè)面被加載時(shí)融师，link會(huì)同時(shí)被加載右钾，而@import引用的 css 會(huì)等到頁(yè)面加載結(jié)束后加載；
3. link方式樣式的權(quán)重高于@import的旱爆；
4. link是 html標(biāo)簽舀射，因此沒(méi)有兼容性，而@import 只有IE5以上才能識(shí)別怀伦。

33. transition和animation的區(qū)別

Animation和transition大部分屬性是相同的脆烟，他們都是隨時(shí)間改變?cè)氐膶傩灾?

區(qū)別在于：

1. transition需要觸發(fā)一個(gè)事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會(huì)隨時(shí)間改變屬性值
2. transition為2 幀房待，從from .... to邢羔，而 animation可以一幀一幀的

34. 說(shuō)說(shuō)flex布局

首先是父級(jí)容器上的屬性

1. flex-direction
   flex-direction 用于設(shè)置主軸方向，對(duì)應(yīng)的值有row桑孩、 row-reverse拜鹤、 column、 column-reverse流椒，分別表示水平敏簿、水平翻轉(zhuǎn)、垂直、垂直翻轉(zhuǎn)

2. flex-wrap
   flex-wrap用于控制子級(jí)項(xiàng)排列超出邊界時(shí)是否換行展示惯裕；取值可以是nowrap温数、wrap、wrap-reverse蜻势，分別表示不換行撑刺、換行、換行并且反轉(zhuǎn)行

3. flex-flow
   flex-flow表示流動(dòng)握玛，即文檔流猜煮，其實(shí)就是flex-direction和flex-wrap的復(fù)合寫(xiě)法

4. justify-content
   justify-content用于設(shè)置主軸方向的對(duì)齊方式，取值有5個(gè)败许，分別是：flex-start王带、flex-end、center市殷、space-between愕撰、space-around，表示主軸起點(diǎn)醋寝、主軸終點(diǎn)搞挣、居中、空白在元素與元素之間音羞、空白環(huán)繞著元素

5. align-items
   align-items與justify-content對(duì)應(yīng)囱桨，justify-content表示主軸方向的對(duì)齊方式，而align-items表示側(cè)軸上的對(duì)齊方式嗅绰。但是取值有點(diǎn)不同舍肠，align-items的取值有：flex-start、flex-end窘面、center翠语、baseline、stretch(默認(rèn)值)财边，分別表示起點(diǎn)對(duì)齊肌括、終點(diǎn)對(duì)齊、居中對(duì)齊酣难、基線對(duì)齊谍夭、拉伸對(duì)齊

6. align-content
   align-content 子類(lèi)多行排列時(shí)，子類(lèi)在側(cè)軸方向的對(duì)齊方式憨募。注意如果是一行紧索，該屬性無(wú)效。即需要設(shè)置換行或者換行翻轉(zhuǎn)才行馋嗜，取值跟justify-content一致

接著來(lái)看子級(jí)項(xiàng)目的相關(guān)屬性

1. align-self
   align-self用于設(shè)置子級(jí)項(xiàng)目自身在側(cè)軸上的對(duì)齊方式齐板，其實(shí)就是單獨(dú)設(shè)置一些特殊子類(lèi)的側(cè)軸對(duì)齊方式，用于覆蓋父級(jí)得align-items葛菇。所以優(yōu)先級(jí)高于align-items甘磨。取值也與align-items一致：flex-start、flex-end眯停、center济舆、baseline、stretch

2. order:n
   用于調(diào)整特定子類(lèi)中在所有子類(lèi)中的排序莺债，n是整數(shù)滋觉，數(shù)值越小，排列越靠前齐邦，默認(rèn)值為 0椎侠，可以是負(fù)數(shù)
   上例中將最后一個(gè)放到前面去

3. flex-grow
   flex-grow表示子項(xiàng)的擴(kuò)展比例，默認(rèn)0 不擴(kuò)展措拇。注意：行中要存在可分配的剩余空間我纪，子項(xiàng)多行時(shí)，以行為單位進(jìn)行擴(kuò)展丐吓，即我這行只能在我這行的剩余空間中按比例分

4. flex-shrink
   flex-shrink用于定義子項(xiàng)的收縮比例浅悉，默認(rèn)值為1，表示等比縮小券犁，容器空間不足需要收縮時(shí)才有效果

5. flex-basis
   定義子項(xiàng)在主軸上的基準(zhǔn)尺寸（初始大惺踅　）
   默認(rèn)值：auto，即項(xiàng)目原定大姓吵摹荞估；如果設(shè)定值，則優(yōu)先于項(xiàng)目原定大小

6. flex
   flex是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)稚新。多個(gè)值以空格隔開(kāi)泼舱，按既定順序排列（grow、shrink枷莉、basis）

35. 說(shuō)說(shuō)BFC

BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)娇昙，是一個(gè)特殊獨(dú)立的渲染區(qū)域，這個(gè)取悅有一定的布局規(guī)則笤妙，比如：

1. BFC 區(qū)域不會(huì)與 float box 重疊
2. BFC 是頁(yè)面上的一個(gè)獨(dú)立容器冒掌，子元素不會(huì)影響到外面
3. 計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算

那些元素會(huì)生成 BFC蹲盘，即如何觸發(fā)BFC：

1. body 根元素
2. 浮動(dòng)元素：float 除 none 以外的值
3. 絕對(duì)定位元素：position (absolute股毫、fixed)
4. display 為 inline-block、table-cell召衔、table-caption铃诬，flex，inline-flex 的元素
5. overflow 除了 visible 以外的值 (hidden、auto趣席、scroll)

利用BFC兵志，可以用于清楚浮動(dòng)，防止 margin 重疊等

36. JS動(dòng)畫(huà)和css3動(dòng)畫(huà)的差異

渲染線程分為main thread 和compositor thread宣肚，如果css動(dòng)畫(huà)只改變 transform和 opacity想罕，這時(shí)整個(gè)CSS動(dòng)畫(huà)在compositor trhead完成；而 JS 動(dòng)畫(huà)則會(huì)在 main thread執(zhí)行霉涨，然后出發(fā)compositor thread 進(jìn)行下一步操作按价。特別注意的是如果改變transform 和opacity是不會(huì)layout或者paint

兩者主要區(qū)別：

1. 功能涵蓋面，JS比 CSS 大
2. 實(shí)現(xiàn)難度不一笙瑟，CSS3比 JS 更加簡(jiǎn)單
3. 對(duì)幀速表現(xiàn)不好的低版本瀏覽器楼镐，css3可以做到自然降級(jí)
4. css3動(dòng)畫(huà)有天然事件支持
5. css3有兼容性問(wèn)題

37. 行內(nèi)元素和塊級(jí)元素以及行級(jí)塊元素

行內(nèi)元素

如：span strong em a del...
特點(diǎn)：

1. 內(nèi)容決定元素所占位置；
2. 不可以通過(guò)css改變寬高往枷；

塊級(jí)元素

如：div p ul li ol form address...
特點(diǎn)：

1. 獨(dú)占一行框产；
2. 可以通過(guò)css改變寬高；

行級(jí)塊元素

如：img...
特點(diǎn)：

1. 內(nèi)容決定元素所占位置师溅；
2. 可以通過(guò)css改變寬高茅信；

需要注意：
凡是帶有inline屬性的元素都有文字特性，就會(huì)被分割墓臭，如img蘸鲸，圖片間有間隙，可以通過(guò)margin-left：-6px來(lái)處理窿锉。
可以用display來(lái)改變?cè)刈靡。纾?code>inline、 inline-block 嗡载、block

38. visibility=hidden和opacity=0以及display:none的區(qū)別

opacity=0
表示該元素隱藏起來(lái)了窑多，但不會(huì)改變頁(yè)面布局，而且如果該元素已經(jīng)綁定一些事件洼滚，如 click 事件埂息，那么點(diǎn)擊該區(qū)域，也能觸發(fā)點(diǎn)擊事件

visibility=hidden
也表示該元素隱藏起來(lái)了遥巴，也不會(huì)改變頁(yè)面布局千康，但是它不會(huì)觸發(fā)該元素已經(jīng)綁定的事件

display=none
把元素隱藏起來(lái)，會(huì)改變頁(yè)面布局铲掐，可以理解成在頁(yè)面中把該元素刪除掉一樣

39. 外邊距折疊

普通文檔流的多個(gè)相鄰塊元素（兄弟或者父子關(guān)系）垂直方向margin會(huì)重疊拾弃，這種現(xiàn)象也被稱(chēng)為margin折疊或者margin塌陷

折疊的規(guī)律是：

1. 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值
2. 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)摆霉，折疊結(jié)果是兩者絕對(duì)值的較大值
3. 兩個(gè)外邊距一正一負(fù)時(shí)豪椿，折疊結(jié)果是兩者的相加的和

40. CSS權(quán)重

規(guī)則如下：
·!important > 行間樣式 > ID > class | 屬性 > 標(biāo)簽選擇器 | 偽類(lèi)選擇器 > 通配符選擇器
咋一下奔坟，可能覺(jué)得這什么東西。其實(shí)這個(gè)也有一個(gè)規(guī)律：一般而言搭盾，選擇器越特殊咳秉，它的優(yōu)先級(jí)越高。也就是選擇器指向的越準(zhǔn)確增蹭，它的優(yōu)先級(jí)就越高滴某。

記住上面的可以解決大多數(shù)問(wèn)題磅摹，但是解決不了所以的問(wèn)題滋迈，特別是一些非常復(fù)雜的選擇器帶來(lái)的優(yōu)先級(jí)問(wèn)題。那怎么辦呢户誓？

這需要你來(lái)了解CSS更深入的東西饼灿，選擇器權(quán)重
各個(gè)選擇器的權(quán)重如下：
!important Infinity
行間樣式 1000
ID選擇器 100
class類(lèi)選擇器 | 屬性選擇器 10
標(biāo)簽選擇器 | 偽類(lèi)選擇器 1
通配符選擇器 0
實(shí)際，權(quán)重表示的就是選擇器優(yōu)先級(jí)帝美。css將各個(gè)簡(jiǎn)單的選擇器對(duì)應(yīng)的“重要度”用一個(gè)數(shù)值來(lái)表示碍彭，我們叫它權(quán)重值，復(fù)雜選擇器（如：父子選擇器悼潭，直接子元素選擇器庇忌，并列選擇器），只要寫(xiě)在同行的選擇器舰褪，權(quán)重值等于各個(gè)簡(jiǎn)單的選擇器的權(quán)重相加皆疹。當(dāng)出現(xiàn)屬性覆蓋時(shí)，權(quán)重值高的覆蓋權(quán)重值底的占拍。
注：
權(quán)重的數(shù)值是256進(jìn)制

41. 實(shí)現(xiàn)圖片在某個(gè)容器中居中

1. 父元素固定寬高略就，利用定位及設(shè)置子元素 margin 值為自身的一半
2. 父元素固定寬高，子元素設(shè)置position: absolute晃酒，margin：auto平均分配margin
3. css3屬性transform表牢；子元素設(shè)置position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)即可
4. 將父元素設(shè)置成 display: table, 子元素設(shè)置為單元格 display: table-cell
5. 彈性布局 display: flex；設(shè)置 align-items: center; justify-content: center

42. 如何實(shí)現(xiàn)元素的垂直居中

有幾種方式

1. 父元素 display:flex;align-items:center
2. 元素絕對(duì)定位贝次，top:50%崔兴，margin-top：-（高度/2）
3. 高度不確定用 transform：translateY（-50%）
4. 父元素table布局，子元素設(shè)置 vertical-align:center

43. 浮動(dòng)元素其display 是什么

block

44. 隱藏頁(yè)面中某個(gè)元素的方法

隱藏頁(yè)面中某個(gè)元素的方法有很多蛔翅，如下：

1. display:none
2. visibility:hidden
3. opacity: 0
4. position移到外部
5. z-index涂層遮蓋

......

45. 關(guān)于calc

C3中使用calc函數(shù)動(dòng)態(tài)計(jì)算值敲茄，例如：

.w {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

也可以嵌套：

.w {
  width: calc( 100% / calc(100px * 2) )
}

clac()已經(jīng)得到普遍支持。對(duì)于不支持calc()的瀏覽器搁宾，整個(gè)屬性值表達(dá)式將被忽略;
不過(guò)我們可以對(duì)那些不支持calc()的瀏覽器折汞，使用一個(gè)固定值作為回退

.w {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

46. 聊聊display:table和table標(biāo)簽

display:table和本身table是相對(duì)應(yīng)的，區(qū)別在于盖腿，display:table能夠讓一個(gè)html元素和它的子節(jié)點(diǎn)像table 元素一樣爽待，使用基于表格的css布局损同，使我們能夠輕松定義一個(gè)單元格的邊界，背景等樣式鸟款，而不會(huì)產(chǎn)生因?yàn)槭褂昧?code>table那樣的制表標(biāo)簽導(dǎo)致的語(yǔ)義化問(wèn)題膏燃。

之所以現(xiàn)在逐漸淘汰了table系表格元素，是因?yàn)橛?div+css編寫(xiě)出來(lái)的文件比用 table邊寫(xiě)出來(lái)的文件小何什，而且 table必須在頁(yè)面完全加載后才顯示组哩，div則是逐行顯示；另外table的嵌套性太多处渣，沒(méi)有 div 簡(jiǎn)潔

47. 說(shuō)說(shuō)position都有哪些值

使用position把元素放置在一個(gè)靜態(tài)的伶贰，相對(duì)的，絕對(duì)的罐栈，固定的位置中

1. static
   設(shè)置為 static 的元素黍衙，他始終處于頁(yè)面流給予的位置，static 元素會(huì)忽略任何top,buttom,left,right 聲明
2. relative
   相對(duì)定位荠诬，可將元素相對(duì)于其原本正常位置移動(dòng)
3. absolute
   絕對(duì)定位琅翻，相對(duì)于最近有定位的父級(jí)進(jìn)行定位（如果無(wú)，則相對(duì)于文檔進(jìn)行定位）
4. fixed
   固定定位柑贞，相對(duì)瀏覽器窗口的進(jìn)行定位

48. 關(guān)于z-index

z-index用于設(shè)置元素的堆疊順序方椎。本質(zhì)是設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸钧嘶。如果為正數(shù)棠众，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)

默認(rèn)值為auto康辑，表示堆疊順序與父元素相等摄欲；其值還可以是inherit，表示從父元素繼承 z-index屬性的值

特別注意疮薇，z-index 僅能在定位元素上奏效

img{
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  }

49. 說(shuō)說(shuō)CSS3有哪些新特性

CSS3的新特性中胸墙，在布局方面新增了 flex布局，在選擇器方面新增了例如first-of-type,nth-child 等選擇器按咒，在盒模型方面添加了 box-sizing來(lái)改變盒模型迟隅，在動(dòng)畫(huà)方面增加了 animation，2d變換励七，3d 變換等智袭，在顏色方面添加透明，rbga等掠抬，在字體方面允許嵌入字體和設(shè)置字體陰影吼野，最后還有媒體查訊等

50. height和line-height的區(qū)別

height一般是指容器的整體高度
line-height 一般是指布局里面一段文字上下行之間的高度，是針對(duì)字體來(lái)設(shè)置的