作者：北風(fēng)菌
鏈接：https://juejin.im/post/6876623829574090760
來源：掘金
好久沒有更新帖子了，最近一直在復(fù)習(xí)準備秋招，最近終于拿到了第一份意向書，終于有時間來整理一下自己最近的復(fù)習(xí)內(nèi)容，以下知識點都是樓主在面試中被問到的問題，我做了幾大塊的分類，各位需要的小伙伴可以收藏一下。因為還在繼續(xù)面試，所以還會不定時更新，因為掘金這邊文章有字數(shù)限制，所以這邊放出了HTML部分，CSS部分，JS部分的知識點，Vue，git，webpack，計網(wǎng)相關(guān)的知識點放在下一篇文章中juejin.im/post/687707… 。
HTML部分：
HTML標簽的分類：
HTML文檔標簽
<!DOCTYPE>：定義文檔類型。
<html>： 定義HTML文檔。
<head>：定義文檔的頭部。<meta>：定義元素可提供的有關(guān)頁面的元信息，比如針對搜索引擎和更新頻度的描述和關(guān)鍵字。meta標簽共有兩個屬性， http-equiv屬性：相當于http頭文件的作用，向瀏覽器傳回一些有用的信息，使用content規(guī)定屬性的內(nèi)容比如
name屬性：主要用來描述網(wǎng)頁，content中的內(nèi)容主要是便于搜索引擎機器人查找信息和分類信息用的。
<base>：定義頁面上的所有鏈接規(guī)定默認地址或默認目標。<title>：定義文檔標題。<link>：定義文檔與外部資源的關(guān)系。<style>：定義HTML文檔樣式信息。
<body>：定義文檔的主體。（腳本在非必需情況時在的最后）<script>：定義客戶端腳本，比如javascript。<noscript>：定義腳本未被執(zhí)行時的替代內(nèi)容。（如文本）
按閉合特征分類：
閉合標簽是指由開始標簽和結(jié)束標簽組成的一對標簽，這種標簽允許嵌套和承載內(nèi)容，例如<html></html>、<p></p>等。
空標簽是指沒有內(nèi)容的標簽，在開始標簽中自動閉合。常見的空標簽有：<br>、<hr>、 <img>、 <input>、 <link> <meta>。
按是否換行特征分類：
塊級元素：塊級元素是值本身屬性為display:block的元素。
內(nèi)聯(lián)元素：內(nèi)聯(lián)元素是指本身屬性為display:inline的元素，其寬度隨元素的內(nèi)容而變化。
塊級元素的特點：
每個塊級元素獨占一行，從上到下排布。
塊級元素可以直接控制寬度高度等盒子模型相關(guān)的css屬性。
不設(shè)置寬度的情況下，塊級元素的寬度是其父級元素內(nèi)容的寬度。
不設(shè)置高度的情況下，塊級元素的高度是他本身內(nèi)容的高度。
常用塊級元素：
內(nèi)聯(lián)元素的特點：
內(nèi)聯(lián)元素會和其他元素從左到右顯示在一行中。
內(nèi)聯(lián)元素不能直接控制寬度高度以及盒子模型相關(guān)的css屬性，可以設(shè)置內(nèi)外邊距的水平方向的值。也就是說，對于內(nèi)聯(lián)元素的margin和padding，只有margin-left/margin-right和padding-left/padding-right是有效的，豎直方向的margin和pading無效果。
內(nèi)聯(lián)元素的寬高是由其內(nèi)容本身的大小決定的。
內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素，不允許在內(nèi)聯(lián)元素中嵌套塊級元素。
常見的內(nèi)聯(lián)元素：
H5新特性（常用）：
HTML5新增元素：
1）標簽增刪 8個語義元素 header section footer aside nav main article figure內(nèi)容元素mark高亮 progress進度
新的表單控件calander date time email url search新的input類型 color date datetime datetime-local email移除過時標簽big font frame frameset2）canvas繪圖，支持內(nèi)聯(lián)SVG。支持MathML
3）多媒體audio video source embed track4）本地離線存儲，把需要離線存儲在本地的文件列在一個manifest配置文件
5）web存儲,localStorage、SessionStorage cookie sessionStorage localStorage區(qū)別：
Cookie屬性詳解Name字段：為一個cookie的名稱Value字段：為一個cookie的值Domain字段：為可以訪問此cookie的域名，二級域名可以獲取頂級域名中的cookie，同二級域名之間不可相互獲取，頂級域名不可獲取二級域名的cookiePath字段：為可以訪問此cookie的頁面路徑，只有此路徑下的頁面可以讀取此cookieExpires/Max-Age字段：為此cookie的超時時間，若設(shè)置為一個時間，則當達到此時間之后，此cookie失效，不設(shè)置的話默認值為Session，即瀏覽器關(guān)閉后才會失效。Size字段：表示此cookie的大小http字段：表示此cookie的httponly屬性，若此屬性設(shè)置為true，則只有在http請求頭中會帶有此cookie的信息，而不能通過document.cookie來訪問。Secure字段：表示設(shè)置是否只能通過https來傳遞此條cookie。
Cookie與webstorage：
cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要)，即cookie在瀏覽器和服務(wù)器間來回傳遞。
cookie數(shù)據(jù)還有路徑（path）的概念，可以限制。cookie只屬于某個路徑下存儲大小限制也不同，cookie數(shù)據(jù)不能超過4K，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如回話標識。
webStorage雖然也有存儲大小的限制，但是比cookie大得多，可以達到5M或更大
sessionStorage與localStorage：
數(shù)據(jù)的有效期不同：
sessionStorage：僅在當前的瀏覽器窗口關(guān)閉有效；
localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過期時間之前一直有效，即使窗口和瀏覽器關(guān)閉。
作用域不同：
sessionStorage：不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage：在所有同源窗口都是共享的；
cookie：也是在所有同源窗口中共享的。
HTTP狀態(tài)碼：
1xx(臨時響應(yīng))：表示臨時響應(yīng)并需要請求者繼續(xù)執(zhí)行操作的狀態(tài)碼。
100(繼續(xù))請求者應(yīng)當繼續(xù)提出請求。服務(wù)器返回此代碼表示已收到請求的第一部分，正在等待其余部分。
101(切換協(xié)議)請求者已要求服務(wù)器切換協(xié)議，服務(wù)器已確認并準備切換。
2xx (成功)：表示成功處理了請求的狀態(tài)碼。
200(成功)服務(wù)器已成功處理了請求。通常，這表示服務(wù)器提供了請求的網(wǎng)頁。如果是對您的 robots.txt 文件顯示此狀態(tài)碼，則表示 Googlebot 已成功檢索到該文件。
201(已創(chuàng)建)請求成功并且服務(wù)器創(chuàng)建了新的資源。
202(已接受)服務(wù)器已接受請求，但尚未處理。
203(非授權(quán)信息)服務(wù)器已成功處理了請求，但返回的信息可能來自另一來源。
204(無內(nèi)容)服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。
205(重置內(nèi)容)服務(wù)器成功處理了請求，但沒有返回任何內(nèi)容。與 204 響應(yīng)不同，此響應(yīng)要求請求者重置文檔視圖(例如，清除表單內(nèi)容以輸入新內(nèi)容)。
206(部分內(nèi)容)服務(wù)器成功處理了部分 GET 請求。
3xx (重定向)：要完成請求，需要進一步操作。通常，這些狀態(tài)碼用來重定向。
300(多種選擇)針對請求，服務(wù)器可執(zhí)行多種操作。服務(wù)器可根據(jù)請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。
301(永久移動)請求的網(wǎng)頁已永久移動到新位置。服務(wù)器返回此響應(yīng)(對 GET 或 HEAD 請求的響應(yīng))時，會自動將請求者轉(zhuǎn)到新位置。您應(yīng)使用此代碼告訴 Googlebot 某個網(wǎng)頁或網(wǎng)站已永久移動到新位置。
302(臨時移動)服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請求。此代碼與響應(yīng) GET 和 HEAD 請求的 301 代碼類似，會自動將請求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來告訴 Googlebot 某個網(wǎng)頁或網(wǎng)站已經(jīng)移動，因為 Googlebot 會繼續(xù)抓取原有位置并編制索引。
303(查看其他位置)請求者應(yīng)當對不同的位置使用單獨的 GET 請求來檢索響應(yīng)時，服務(wù)器返回此代碼。對于除 HEAD 之外的所有請求，服務(wù)器會自動轉(zhuǎn)到其他位置。
304(未修改)自從上次請求后，請求的網(wǎng)頁未修改過。服務(wù)器返回此響應(yīng)時，不會返回網(wǎng)頁內(nèi)容。如果網(wǎng)頁自請求者上次請求后再也沒有更改過，您應(yīng)將服務(wù)器配置為返回此響應(yīng)(稱為 If-Modified-Since HTTP 標頭)。服務(wù)器可以告訴 Googlebot 自從上次抓取后網(wǎng)頁沒有變更，進而節(jié)省帶寬和開銷。
305(使用代理)請求者只能使用代理訪問請求的網(wǎng)頁。如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)使用代理。
307(臨時重定向)服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請求，但請求者應(yīng)繼續(xù)使用原有位置來響應(yīng)以后的請求。此代碼與響應(yīng) GET 和 HEAD 請求的 301 代碼類似，會自動將請求者轉(zhuǎn)到不同的位置，但您不應(yīng)使用此代碼來告訴 Googlebot 某個頁面或網(wǎng)站已經(jīng)移動，因為 Googlebot 會繼續(xù)抓取原有位置并編制索引。
4xx(請求錯誤)：這些狀態(tài)碼表示請求可能出錯，妨礙了服務(wù)器的處理。
400(錯誤請求)服務(wù)器不理解請求的語法。
401(未授權(quán))請求要求身份驗證。對于登錄后請求的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。
403(禁止)服務(wù)器拒絕請求。如果您在 Googlebot 嘗試抓取您網(wǎng)站上的有效網(wǎng)頁時看到此狀態(tài)碼(您可以在 Google 網(wǎng)站管理員工具診斷下的網(wǎng)絡(luò)抓取頁面上看到此信息)，可能是您的服務(wù)器或主機拒絕了 Googlebot 訪問。
404(未找到)服務(wù)器找不到請求的網(wǎng)頁。例如，對于服務(wù)器上不存在的網(wǎng)頁經(jīng)常會返回此代碼。
405(方法禁用)禁用請求中指定的方法。
406(不接受)無法使用請求的內(nèi)容特性響應(yīng)請求的網(wǎng)頁。
407(需要代理授權(quán))此狀態(tài)碼與 401(未授權(quán))類似，但指定請求者應(yīng)當授權(quán)使用代理。如果服務(wù)器返回此響應(yīng)，還表示請求者應(yīng)當使用代理。
408(請求超時)服務(wù)器等候請求時發(fā)生超時。
5xx(服務(wù)器錯誤)：這些狀態(tài)碼表示服務(wù)器在處理請求時發(fā)生內(nèi)部錯誤。這些錯誤可能是服務(wù)器本身的錯誤，而不是請求出錯。
500(服務(wù)器內(nèi)部錯誤)服務(wù)器遇到錯誤，無法完成請求。
501(尚未實施)服務(wù)器不具備完成請求的功能。例如，服務(wù)器無法識別請求方法時可能會返回此代碼。
502(錯誤網(wǎng)關(guān))服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)。
503(服務(wù)不可用)服務(wù)器目前無法使用(由于超載或停機維護)。通常，這只是暫時狀態(tài)。
504(網(wǎng)關(guān)超時)服務(wù)器作為網(wǎng)關(guān)或代理，但是沒有及時從上游服務(wù)器收到請求。
505(HTTP 版本不受支持)服務(wù)器不支持請求中所用的 HTTP 協(xié)議版本。
前端優(yōu)化方法：
方法分類：
降低請求量：合并資源，減少HTTP 請求數(shù)，minify / gzip 壓縮， webPlazyLoad。
加快請求速度：預(yù)解析DNS，減少域名數(shù)，并行加載，CDN 分發(fā)。
緩存：HTTP 協(xié)議緩存請求，離線緩存 manifest，離線數(shù)據(jù)緩存localStorage。
渲染：JS/CSS優(yōu)化，加載順序，服務(wù)端渲染，pipeline。
具體措施：
減少HTTP請求次數(shù)：CSS Sprites，js、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip、CDN托管、data緩存、圖片服務(wù)器
前端模板JS+數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪費，前端用變量保存AJAX請求結(jié)果，每次操作本地變量，不用請求，減少請求次數(shù)
用innerHTML替代DOM操作，減少DOM操作次數(shù)，優(yōu)化JavaScript性能。
當需要設(shè)置的樣式很多時，設(shè)置className而不是直接操作Style
少用全局變量、緩存DOM節(jié)點查找的結(jié)果。減少IO讀取
避免使用CSS Expression（css表達式）又稱Dynamic properties（動態(tài)屬性）
圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部，加上時間戳。
防止內(nèi)存泄漏：內(nèi)存泄漏指任何對象在不再擁有或需要它之后仍然繼續(xù)存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他的數(shù)量。如果一個對象的引用數(shù)量為0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈ㄒ灰檬茄h(huán)的，那么該對象的內(nèi)存即可回收。
優(yōu)雅降級與漸進增強：
瀏覽器輸入網(wǎng)址到頁面渲染全過程
漸進增強：一開始就針對低版本瀏覽器進行構(gòu)建頁面，完成基本的功能，然后在針對高級瀏覽器進行效果，交互，追加功能達到更好的體驗。
優(yōu)雅降級：一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)，比如一開始使用css3的特性構(gòu)建一個應(yīng)用，然后逐步針對各大瀏覽器進行hack使其可以在低版本瀏覽器上正常瀏覽。
post和get區(qū)別：
get參數(shù)通過url傳遞，post參數(shù)放在request body中。
get請求在url中傳遞的參數(shù)是有長度限制的，而post沒有。
get比post更不安全，因為參數(shù)直接暴露在url中，所以不能用來傳遞敏感信息。
get請求只能進行url編碼，而post支持多種編碼方式
get請求參數(shù)會被完整保留在瀏覽歷史記錄里，而post中的參數(shù)不會被保留。
GET和POST本質(zhì)上就是TCP鏈接，并無差別。但是由于HTTP的規(guī)定和瀏覽器/服務(wù)器的限制，導(dǎo)致他們在應(yīng)用過程中體現(xiàn)出一些不同。
GET產(chǎn)生一個TCP數(shù)據(jù)包；POST產(chǎn)生兩個TCP數(shù)據(jù)包。對于GET方式的請求，瀏覽器會把http header和data一并發(fā)送出去，服務(wù)器響應(yīng)200（返回數(shù)據(jù)）；而對于POST，瀏覽器先發(fā)送header，服務(wù)器響應(yīng)100 continue，瀏覽器再發(fā)送data，服務(wù)器響應(yīng)200 ok（返回數(shù)據(jù)）。
http與https有什么區(qū)別？
（1） https協(xié)議需要ca申請認證書，一般免費的較少
（2） http是超文本傳輸協(xié)議，信息是明文傳輸，https則是具有安全性的ssl加密傳輸協(xié)議
（3） http和https使用的是完全不同的連接方式，用的端口也不一樣，前者是80，后者是443
（4） http的連接很簡單，是無狀態(tài)的，https協(xié)議是由ssl+http協(xié)議構(gòu)建的可進行加密傳輸，身份認證的網(wǎng)絡(luò)協(xié)議，比http安全
HTTP協(xié)議中緩存的處理流程：
緩存分為兩種：強緩存和協(xié)商緩存，根據(jù)響應(yīng)的header內(nèi)容來決定。
強緩存是利用http頭中的Expires和cache-Control兩個字段來控制的，用來表示資源的緩存時間。強緩存中，普通刷新會忽略它，但不會清除它，需要強制刷新。瀏覽器強制刷新，請求會帶上cache-Control :no-cache和pragma: no-cache
協(xié)商緩存就是由服務(wù)器來確定緩存資源是否可用，所以客戶端與服務(wù)器端要通過某種標識來進行通信，從而讓服務(wù)器判斷請求資源是否可以緩存訪問。
普通刷新會啟用弱緩存，忽略強緩存。只有在地址欄或收藏夾輸入網(wǎng)址、通過鏈接引用資源等情況下，瀏覽器才會啟用強緩存，這也是為什么有時候我們更新一張圖片、一個js文件，頁面內(nèi)容依然是舊的，但是直接瀏覽器訪問那個圖片或文件，看到的內(nèi)容卻是新的。這個主要涉及到兩組協(xié)商緩存相關(guān)的header字段:Etag和If-None-Match、Last-Modified和If-Modified-Since。
瀏覽器的緩存過程：
瀏覽器請求某一資源時，會先獲取該資源緩存的header信息，然后根據(jù)header中的cache-Control和Expires來判斷是否過期。
若沒過期則直接從緩存中獲取資源信息，包括緩存的header的信息，所以此次請求不會與服務(wù)器進行通信。這里判斷是否過期，則是強緩存相關(guān)。
如果顯示已過期，瀏覽器會向服務(wù)器端發(fā)送請求，這個請求會攜帶第一次請求返回的有關(guān)緩存的header字段信息。 比如客戶端會通過If-None-Match頭將先前服務(wù)器端發(fā)送過來的Etag發(fā)送給服務(wù)器，服務(wù)會對比這個客戶端發(fā)過來的Etag是否與服務(wù)器的相同， 若相同，就將If-None-Match的值設(shè)為false，返回狀態(tài)304，客戶端繼續(xù)使用本地緩存，不解析服務(wù)器端發(fā)回來的數(shù)據(jù)，若不相同就將If-None-Match的值設(shè)為true，返回狀態(tài)為200，客戶端重新機械服務(wù)器端返回的數(shù)據(jù);客戶端還會通過If-Modified-since頭將先前服務(wù)器端發(fā)過來的最后修改時間戳發(fā)送給服務(wù)器，服務(wù)器端通過這個時間戳判斷客戶端的頁面是否是最新的，如果不是最新的，則返回最新的內(nèi)容，如果是最新的，則返回304，客戶端繼續(xù)使用本地緩存。
如何解決前端開發(fā)中的緩存問題
對開發(fā)者來說，只要關(guān)閉瀏覽器緩存就可以了，找到network，Disable cache選項，打鉤即可取消緩存。
開發(fā)者可以關(guān)閉緩存，但是不能要求所有用戶都進行此類操作，此時可以在引用的文件之后拼接隨機數(shù)或者日期都可以，如css/index.css?v=0.0001，瀏覽器就會認為是新的請求，而不會使用緩存中的文件。由于每次資源的修改都要更新引用的位置，同時修改參數(shù)的值，所以操作起來不是很方便，除非是在動態(tài)頁面比如jsp中用服務(wù)器變量(v=${sysRnd})
如果緩存問題出現(xiàn)在ajax請求中，則在ajax請求的地址追加隨機數(shù)
直接ctrl+f5，這個辦法能解決頁面直接引用的資源更新的問題
使用瀏覽器的隱私模式開發(fā)；
如果資源引用的頁面，被嵌入到了一個iframe里面，可以在iframe的區(qū)域右鍵單擊重新加載該頁面
html5如何及時更新緩存文件(js、css或圖片)
后端接口頁面設(shè)置
header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); 復(fù)制代碼
html頁面中設(shè)置meta標簽的屬性(meta標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數(shù)" content="參數(shù)變量值"＞)
<meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">//是用于設(shè)定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容，設(shè)定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出? <meta http-equiv="Expires" content="0"> 復(fù)制代碼
對于圖片或css文件，可以在文件名后面添加一個隨機數(shù)或標志位，例如
<link rel="stylesheet" href="./style/style.css?+Math.random()"> 復(fù)制代碼
對于js文件也可以采取3的方法，或者在文件名后使用時間戳
<script language="javascript" src="UILib/Common/Common.js?time=new Date()"> 復(fù)制代碼
輸入URL到后發(fā)生了什么：
簡單過程：
DNS域名解析；
建立TCP連接；
發(fā)送HTTP請求；
服務(wù)器處理請求；
返回響應(yīng)結(jié)果；
關(guān)閉TCP連接；
瀏覽器解析HTML；
瀏覽器布局渲染；
詳細分析構(gòu)建請求的過程:
應(yīng)用層進行DNS解析 通過DNS將域名解析成IP地址，在解析過程中，按照瀏覽器緩存，系統(tǒng)緩存，路由器緩存，ISP(運營商)DNS緩存，根域名服務(wù)器，頂級域名服務(wù)器，主域名服務(wù)器的順序，逐步讀取緩存，直到拿到IP地址。 這里使用DNS預(yù)解析，可以根據(jù)瀏覽器定義的規(guī)則，提前解析之后可能會用到的域名，使解析結(jié)果緩存到系統(tǒng)緩存中，縮短DNS解析時間，來提高網(wǎng)站的訪問速度。
應(yīng)用層生成HTTP請求報文 應(yīng)用層生成針對目標服務(wù)器的HTTP報文請求，HTTP請求包括起始行，首部和主體部分。首部包括域名host，keep-alive，User-Agent，Accept-Endoding，Accept-Language，cookie等信息
傳輸層建立TCP連接 http協(xié)議使用的TCP協(xié)議。 將http請求報文按序號分為多個報文段，并對每個報文段進行封裝，使用本地的隨機tcp源端口簡歷到目標服務(wù)器的tcp80端口(https是443端口)的連接，TCP源端口和目的端口被加入到報文中。即協(xié)議數(shù)據(jù)單元，同時還會加入序列號，確認號，檢驗和等參數(shù)，共計添加20個字節(jié)的頭部信息。 這里構(gòu)建TCP連接請求會增加大量的網(wǎng)絡(luò)延時。常用的優(yōu)化方法如下：
1)資源打包，合并請求
2)多使用緩存，減少網(wǎng)絡(luò)傳輸
3)使用keep-alive建立持久連接
4)使用多個域名，增加瀏覽器的資源并發(fā)加載數(shù)，或者使用http2的管道化連接的多路復(fù)用技術(shù)
網(wǎng)絡(luò)層使用IP協(xié)議來選擇線路。 處理來自傳輸層的數(shù)據(jù)段segment，將數(shù)據(jù)段segment裝入數(shù)據(jù)包packet，填充包頭，主要添加源和目的IP地址，然后發(fā)送數(shù)據(jù)。IP協(xié)議負責(zé)選擇傳送的路線，稱為路由功能。
數(shù)據(jù)鏈路層實現(xiàn)網(wǎng)絡(luò)相鄰結(jié)點間可靠的數(shù)據(jù)通信 為了保證數(shù)據(jù)的可靠性，把數(shù)據(jù)包packet封裝成幀，并按順序傳送各幀，對每個數(shù)據(jù)塊計算CRC(循環(huán)冗余檢驗),防止數(shù)據(jù)包丟失，出錯就重傳。 將數(shù)據(jù)包封裝成幀，分為幀頭和幀尾，幀尾是CRC校驗部分，幀頭主要是添加數(shù)據(jù)鏈路層的地址，源地址和目的地址，即網(wǎng)絡(luò)相鄰結(jié)點間的MAC地址
物理層傳輸數(shù)據(jù) 將數(shù)據(jù)鏈路層的幀轉(zhuǎn)換為二進制形式的比特流，從網(wǎng)卡發(fā)送出去，再轉(zhuǎn)換成電子，光學(xué)信號在網(wǎng)絡(luò)中傳輸。
總結(jié)：6個步驟分別為：DNS協(xié)議解析URL地址，生成HTTP請求報文，構(gòu)建TCP鏈接，使用IP協(xié)議選擇傳輸路線，數(shù)據(jù)鏈路層保證數(shù)據(jù)的可靠傳輸，物理層將數(shù)據(jù)轉(zhuǎn)換為物理信號進行傳輸。
補充：服務(wù)器處理及反向傳輸:
服務(wù)器接收到這個比特流，把比特流轉(zhuǎn)換成幀格式，上傳到數(shù)據(jù)鏈路層，服務(wù)器發(fā)現(xiàn)數(shù)據(jù)幀中的目的MAC地址與本網(wǎng)卡的MAC地址相同，服務(wù)器拆除數(shù)據(jù)鏈路層的封裝后，把數(shù)據(jù)包上傳到網(wǎng)絡(luò)層。服務(wù)器的網(wǎng)絡(luò)層比較數(shù)據(jù)包中的目的IP地址，發(fā)現(xiàn)與本機的IP地址相同，服務(wù)器拆除網(wǎng)絡(luò)層的封裝后，把數(shù)據(jù)分段上傳到傳輸層。傳輸層對數(shù)據(jù)分段進行確認、排序、重組，確保數(shù)據(jù)傳輸?shù)目煽啃?。?shù)據(jù)最后被傳到服務(wù)器的應(yīng)用層
接著，通過傳輸層、網(wǎng)絡(luò)層、數(shù)據(jù)鏈路層的層層封裝，最終將響應(yīng)報文封裝成二進制比特流，并轉(zhuǎn)換成其他信號，如電信號到網(wǎng)絡(luò)中傳輸
反向傳輸?shù)倪^程與正向傳輸?shù)倪^程類似
瀏覽器的渲染過程：
主要步驟
瀏覽器將獲取到的HTML文檔解析成DOM樹
處理css標記，構(gòu)成層疊樣式表模型CSSOM（css object model）
將DOM和CSSOM合并為渲染樹(rendering tree)，代表一系列將要被渲染的對象
渲染樹的每個元素包含的內(nèi)容是計算過的，稱之為布局layout，瀏覽器使用一種流式處理的方法，只需要一次繪制操作就可以布局所有元素
將渲染樹的各個節(jié)點繪制到屏幕上，這一步被稱為繪制painting 具體流程：
構(gòu)建DOM樹：
瀏覽器收到服務(wù)器響應(yīng)來的HTML文檔后，遍歷文檔節(jié)點，生成DOM樹，DOM樹構(gòu)建時可能會被CSS和JS的加載而執(zhí)行阻塞，display:none的元素，注釋，script也會存在于DOM樹中。
構(gòu)建CSSOM規(guī)則樹
瀏覽器解析CSS文件并對每個文件生成一個stylesheet對象，每個對象包含css規(guī)則。css解析可以和DOM解析同時進行，css的解析會被js互斥。
構(gòu)建渲染樹(render tree):
瀏覽器從DOM樹的根結(jié)點遍歷每個可見結(jié)點，然后對每個可見結(jié)點找到css樣式規(guī)則并應(yīng)用。Render tree與DOM tree不完全對應(yīng)，display:none的元素不在render tree中，visibility:hidden元素在render tree中。這個時候還沒渲染到屏幕上，渲染到屏幕需要用到各個節(jié)點的位置信息，需要布局的處理
渲染樹布局(render tree layout)：
布局階段，遍歷每一個render object對象，包含寬高，位置，背景色等樣式信息，通過這些信息確定每個結(jié)點在頁面上的確切位置。脫離文檔流，脫離的是render tree
渲染樹繪制(render tree paint):
繪制階段，瀏覽器遍歷渲染樹，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容，由瀏覽器的后端UI組建完成。
Js阻塞：
JS可以操作DOM來改變DOM結(jié)構(gòu)，修改CSSOM樣式，所以瀏覽器在遇到<script>標簽時，DOM構(gòu)建將暫停，直到腳本執(zhí)行完成，再繼續(xù)構(gòu)建DOM，所以<script>標簽一般放在最后?，F(xiàn)在可以在<script>標簽上增加defer，async等屬性，單獨解析js中操作DOM和CSSOM的地方追加到DOM和CSSOM上。Css阻塞：
CSSOM負責(zé)存儲渲染信息，所以CSSOM在瀏覽器合成渲染樹之前必須是完備的，否則就不會進入渲染過程。所以將樣式放在head中，為了更快的解析css。defer和async屬性的區(qū)別：
沒有defer和async屬性的時候瀏覽器在讀取到<script>標簽的時候會立即讀取腳本文件，而不會加載后續(xù)的文檔元素，會阻塞后續(xù)DOM的構(gòu)建 文檔解析時，遇到設(shè)置了defer的腳本，就會在后臺進行下載，但是并不會阻止文檔的渲染，當頁面解析&渲染完畢后。會等到所有的defer腳本加載完畢并按照順序執(zhí)行，執(zhí)行完畢后會觸發(fā)DOMContentLoaded(dom內(nèi)容加載完畢)事件。 async腳本會在加載完畢后執(zhí)行。async腳本的加載不計入DOMContentLoaded事件統(tǒng)計 有defer或者async屬性之后，腳本文件的讀取和后續(xù)文檔的加載是并行的也就是異步執(zhí)行，js腳本的執(zhí)行會等到所有元素被解析完成之后，DOMContentLoaded事件調(diào)用前執(zhí)行。 存在多個defer的腳本文件時，他們會按照順序defer的順序執(zhí)行，而async的加載則是無序的，只要DOM加載完成會立即執(zhí)行，不考慮腳本之間的依賴關(guān)系。
重排(layout)和重繪(repaint)：
DOM的變化影響到了已渲染完成的幾何屬性，比如寬高等，瀏覽器將重新計算元素的幾何屬性，其他元素的幾何屬性也會受到影響，瀏覽器需要重新構(gòu)造渲染樹（Render樹），這個過程稱之為重排(也叫回流reflow)，瀏覽器將受到影響的部分重新繪制在屏幕上的過程稱之為重繪。display:none會觸發(fā)reflow，而visibility: hidden屬性則并不算是不可見屬性，只會觸發(fā)repaint
重繪產(chǎn)生的原因有：
添加或刪除可見的DOM元素，
元素的尺寸位置發(fā)生改變。
瀏覽器頁面初始化
瀏覽器窗口大小發(fā)生變化
重排一定導(dǎo)致重繪，重繪不一定導(dǎo)致重排。
減少重繪重排的方法：
不在布局信息改變時做DOM查詢
不要一條一條的修改DOM樣式，使用csstext，className一次性改變屬性
在內(nèi)存中多次操作節(jié)點，完成后再添加到文檔中
對于一個元素進行復(fù)雜的操作時，先隱藏，操作完再展示
需要經(jīng)常獲取那些引起瀏覽器重排的屬性時，緩存到變量中
不要使用table布局，一個小改動會導(dǎo)致table重新布局
對于多次重排的元素，比如說動畫，使用絕對定位讓其脫離文檔流，使其不影響其他元素，減少重繪范圍
http報文構(gòu)成：
使用HTTP長連接有哪些優(yōu)點：
HTTP長連接（持久化連接）:? 在一個TCP連接的基礎(chǔ)之上，發(fā)送多個HTTP請求以及接收多個HTTP響應(yīng)，這是為了避免每一次請求都去打開一個新的連接。
在HTTP/1.0中默認使用短連接。也就是說，客戶端和服務(wù)器每進行一次HTTP操作，就建立一次連接，任務(wù)結(jié)束就中斷連接。 而從HTTP/1.1起，默認使用長連接，用以保持連接特性。使用長連接的HTTP協(xié)議，會在響應(yīng)頭加入這行代碼：Connection:keep-alive 在使用長連接的情況下，當一個網(wǎng)頁打開完成后，客戶端和服務(wù)器之間用于傳輸HTTP數(shù)據(jù)的TCP連接不會關(guān)閉，客戶端再次訪問這個服務(wù)器時，會繼續(xù)使用這一條已經(jīng)建立的連接。
Keep-Alive不會永久保持連接，它有一個保持時間，可以在不同的服務(wù)器軟件（如Apache）中設(shè)定這個時間。實現(xiàn)長連接需要客戶端和服務(wù)端都支持長連接。
HTTP協(xié)議的長連接和短連接，實質(zhì)上是TCP協(xié)議的長連接和短連接。
長連接的特點：
可以省去較多的TCP連接建立和關(guān)閉的操作，減少浪費，節(jié)約時間。適用于頻繁請求服務(wù)器資源的客戶端之間建立。
短連接的特點：
對于服務(wù)器來說管理較為簡單，存在的連接都是有用的連接，但是如果客戶請求頻繁，將在TCP的建立和關(guān)閉操作上浪費時間和帶寬。WEB網(wǎng)站的http服務(wù)一般采用的都是短連接服務(wù)。
客戶端和服務(wù)器之間的連接如果一直不關(guān)閉，隨著建立連接的客戶端越來越多，會增加服務(wù)器的壓力，所以一般采取以下幾種策略：
1.關(guān)閉一些長時間沒有發(fā)生讀寫事件的連接。
2.限制每個客戶端的最大長連接數(shù)量。
TLS/SSL協(xié)議是如何保障信息安全的：
SSL(安全套接字協(xié)議):是web瀏覽器和web服務(wù)器之間安全交換信息的協(xié)議，提供兩個基本的安全服務(wù)，鑒別和保密 TLS(安全傳輸層協(xié)議):用于在兩個通信應(yīng)用程序之間提供保密性和數(shù)據(jù)完整性。其中TLS是SSL的升級版
SSL/TLS協(xié)議的基本過程
（1） 客戶端向服務(wù)器端索要并驗證公鑰。
（2） 雙方協(xié)商生成"對話密鑰"。
（3） 雙方采用"對話密鑰"進行加密通信。具體過程可細分為8個步驟：
客戶端向服務(wù)器發(fā)起https請求，連接到服務(wù)器的443端口
服務(wù)器有密鑰對，即公鑰和私鑰，用來進行非對稱加密
服務(wù)器將公鑰發(fā)送給客戶端
客戶端收到服務(wù)端的數(shù)據(jù)后，先驗證其證書的合法性，如果合法，客戶端生成客戶端密鑰，并使用服務(wù)端接收到的公鑰對客戶端密鑰進行加密。
客戶端再次發(fā)起https請求，將加密之后的客戶端密鑰發(fā)送給服務(wù)器
服務(wù)器接收到客戶端發(fā)送過來的加密后的密鑰，用自己的私鑰進行解密，然后用客戶端密鑰對要發(fā)送的數(shù)據(jù)進行加密。
將加密后的數(shù)據(jù)發(fā)送給客戶端
客戶端使用客戶端密鑰對加密數(shù)據(jù)進行解密，得到服務(wù)器發(fā)送的數(shù)據(jù)。SSL協(xié)議的內(nèi)容：
握手協(xié)議 握手協(xié)議是客戶端和服務(wù)器用SSL連接通信時使用的第一個子協(xié)議，握手協(xié)議包括客戶機與服務(wù)器之間的一系列消息，是SSL協(xié)議中最復(fù)雜的協(xié)議，該協(xié)議允許服務(wù)器和客戶機相互驗證，協(xié)商加密和MAC算法(帶秘密密鑰的Hash函數(shù))及保密密鑰，用來保護在SSL記錄中發(fā)送的數(shù)據(jù),握手協(xié)議是在應(yīng)用程序的數(shù)據(jù)傳輸之前使用的。 1.1 建立安全能力，發(fā)送信息，交換版本，隨機數(shù)，會話ID，密碼套件，壓縮方法等信息 1.2 服務(wù)器鑒別與密鑰交換 1.3 客戶機鑒別與密鑰交換 1.4 完成
記錄協(xié)議 記錄協(xié)議在客戶機和服務(wù)器成功握手之后使用，即客戶機和服務(wù)器鑒別對方和確定安全信息交換使用的算法后，進入SSL記錄協(xié)議。
警報協(xié)議 客戶機和服務(wù)器發(fā)現(xiàn)錯誤時，向?qū)Ψ桨l(fā)送一個警報信息，如果是致命錯誤，則算法立即關(guān)閉SSL連接，雙方刪除相關(guān)的會話號，密鑰等。
總結(jié)：SSL中，使用握手協(xié)議協(xié)商加密和MAC算法以及保密密鑰，使用握手協(xié)議對交換的數(shù)據(jù)進行加密和簽名，使用警報協(xié)議定義數(shù)據(jù)傳輸過程中，出現(xiàn)問題改如何解決。
HTTP 1.0,1.1,2.0協(xié)議的區(qū)別：
HTTP1.0 HTTP 1.1主要區(qū)別長連接HTTP 1.0需要使用keep-alive參數(shù)來告知服務(wù)器端要建立一個長連接，而HTTP1.1默認支持長連接。
HTTP是基于TCP/IP協(xié)議的，創(chuàng)建一個TCP連接是需要經(jīng)過三次握手的,有一定的開銷，如果每次通訊都要重新建立連接的話，對性能有影響。因此最好能維持一個長連接，可以用個長連接來發(fā)多個請求。節(jié)約帶寬HTTP 1.1支持只發(fā)送header信息(不帶任何body信息)，如果服務(wù)器認為客戶端有權(quán)限請求服務(wù)器，則返回100，否則返回401?？蛻舳巳绻邮艿?00，才開始把請求body發(fā)送到服務(wù)器。
這樣當服務(wù)器返回401的時候，客戶端就可以不用發(fā)送請求body了，節(jié)約了帶寬。
另外HTTP還支持傳送內(nèi)容的一部分。這樣當客戶端已經(jīng)有一部分的資源后，只需要跟服務(wù)器請求另外的部分資源即可。這是支持文件斷點續(xù)傳的基礎(chǔ)。HOST域現(xiàn)在可以web server例如tomat，設(shè)置虛擬站點是非常常見的，也即是說，web server上的多個虛擬站點可以共享同一個ip和端口。
HTTP1.0是沒有host域的，HTTP1.1才支持這個參數(shù)。
HTTP1.1 HTTP 2.0主要區(qū)別多路復(fù)用HTTP2.0使用了(類似epoll)多路復(fù)用的技術(shù)，做到同一個連接并發(fā)處理多個請求，而且并發(fā)請求的數(shù)量比HTTP1.1大了好幾個數(shù)量級。
當然HTTP1.1也可以多建立幾個TCP連接，來支持處理更多并發(fā)的請求，但是創(chuàng)建TCP連接本身也是有開銷的。
TCP連接有一個預(yù)熱和保護的過程，先檢查數(shù)據(jù)是否傳送成功，一旦成功過，則慢慢加大傳輸速度。因此對應(yīng)瞬時并發(fā)的連接，服務(wù)器的響應(yīng)就會變慢。所以最好能使用一個建立好的連接，并且這個連接可以支持瞬時并發(fā)的請求。數(shù)據(jù)壓縮HTTP1.1不支持header數(shù)據(jù)的壓縮，HTTP2.0使用HPACK算法對header的數(shù)據(jù)進行壓縮，這樣數(shù)據(jù)體積小了，在網(wǎng)絡(luò)上傳輸就會更快。
請求與響應(yīng)首部的定義在HTTP2.0中基本沒有變，只是所有首部鍵必須全部小寫，而且要求行要獨立為:method:、:scheme:、:host:、:path:這些鍵值對
對于相同的數(shù)據(jù)，不再重新通過每次請求和響應(yīng)發(fā)送。每個新的首部鍵值對要么追加到當前表的末尾，要么替換表中之前的值。首部表在HTTP2.0的鏈接存續(xù)期內(nèi)始終存在，由客戶端和服務(wù)端共同漸進的更新。服務(wù)器推送意思是說，當我們對支持HTTP2.0的web server請求數(shù)據(jù)的時候，服務(wù)器會順便把一些客戶端需要的資源一起推送到客戶端，免得客戶端再次創(chuàng)建連接發(fā)送請求到服務(wù)器端獲取。這種方式非常合適加載靜態(tài)資源。
服務(wù)器端推送的這些資源其實存在客戶端的某處地方，客戶端直接從本地加載這些資源就可以了，不用走網(wǎng)絡(luò)，速度自然是快很多的。二進制幀層HTTP2.0會把所有信息分割成更小的消息和幀，并采用二進制格式將其封裝。例如header封裝到Headers幀，request body封裝到Data幀。
HTTP2.0通信都在一個TCP連接上完成，這個連接可以承載任意數(shù)量的雙向數(shù)據(jù)流，相應(yīng)的每個數(shù)據(jù)流以消息的形式發(fā)送。而消息由一或多個幀組成，這些幀可以亂序發(fā)送，然后根據(jù)每個幀首部的流標識符重新組裝。
WebSocket協(xié)議：
ajax輪詢ajax（異步的javascript與xml技術(shù)）是一種有效利用javascript和dom的操作，以達到局部web頁面的提花和加載的異步通信手段。和以前的同步通信相比，他只更新一部分頁面，相應(yīng)中傳輸?shù)臄?shù)據(jù)量會因此的減少。
ajax輪詢的原理是，讓瀏覽器每隔一段時間就發(fā)送一次請求，詢問服務(wù)器是否有新消息。而利用ajax實時的從服務(wù)器獲取內(nèi)容，有可能導(dǎo)致大量的請求產(chǎn)生。
長輪詢原理和ajax輪詢差不多，都是采用輪詢的方式，不過采用的是阻塞模型。也就是說，當客戶端發(fā)起連接后，如果服務(wù)器端內(nèi)容沒有更新，將響應(yīng)至于掛起狀態(tài)，一直不回復(fù)response給客戶端，知道有內(nèi)容更新，再返回響應(yīng)。
http的特點：被動性，請求只能由客戶端發(fā)起。服務(wù)器端不能主動聯(lián)系客戶端。
ajax輪詢 需要服務(wù)器有很快的處理速度和資源。（速度）
長輪詢 需要有很高的并發(fā)，也就是說同時接待客戶的能力。（場地大?。￤ebSocket
WebSocket是HTML5出的東西（協(xié)議），是HTML5開始提供的一種瀏覽器與服務(wù)器進行全雙工通訊的網(wǎng)絡(luò)技術(shù)，屬于應(yīng)用層協(xié)議。它基于TCP傳輸協(xié)議，并復(fù)用HTTP的握手通道。
一旦web服務(wù)器和客戶端建立起websocket協(xié)議的通信連接，之后所有的通信都依靠這個專用連接進行。只需要經(jīng)過一次HTTP請求，就可以做到源源不斷的信息傳送了。
通過在請求首部中設(shè)置Connection: Upgrade來使用websocket協(xié)議
websocket協(xié)議具有以下的特點推送功能支持服務(wù)器端向客戶端推送功能。服務(wù)器可以直接發(fā)送數(shù)據(jù)而不用等待客戶端的請求。減少通信量只要建立起websocket連接，就一直保持連接，在此期間可以源源不斷的傳送消息，直到關(guān)閉請求。也就避免了HTTP的非狀態(tài)性。
和http相比，不但每次連接時的總開銷減少了，而且websocket的首部信息量也小 ，通信量也減少了。
支持雙向通信，實時性更強。更好的二進制支持。較少的控制開銷。
連接創(chuàng)建后，ws客戶端、服務(wù)端進行數(shù)據(jù)交換時，協(xié)議控制的數(shù)據(jù)包頭部較小。在不包含頭部的情況下，服務(wù)端到客戶端的包頭只有2~10字節(jié)（取決于數(shù)據(jù)包長度），客戶端到服務(wù)端的的話，需要加上額外的4字節(jié)的掩碼。而HTTP協(xié)議每次通信都需要攜帶完整的頭部。支持擴展ws協(xié)議定義了擴展，用戶可以擴展協(xié)議，或者實現(xiàn)自定義的子協(xié)議。（比如支持自定義壓縮算法等）
CSS部分：
css3新增：
CSS3邊框如border-radius，box-shadow等；CSS3背景如background-size，background-origin等；CSS3 2D，3D轉(zhuǎn)換如transform等；CSS3動畫如animation等。
CSS3的新特性中，在布局方面新增了flex布局，在選擇器方面新增了例如first-of-type,nth-child等選擇器，在盒模型方面添加了box-sizing來改變盒模型，在動畫方面增加了animation，2d變換，3d變換等，在顏色方面添加透明，rbga等，在字體方面允許嵌入字體和設(shè)置字體陰影，最后還有媒體查訊等.
css的兩種盒模型
在標準的盒子模型中，width指content部分的寬度
在IE盒子模型中，width表示content+padding+border這三個部分的寬度
如果想要切換盒模型也很簡單，這里需要借助css3的box-sizing屬性
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
box-sizing的默認屬性是content-box
垂直居中方式：
使用定位和負外邊距，父元素，子元素固定寬高，父相子絕，子元素top屬性50%,上外邊距margin-top為子元素本身高度的一半（這種方式需要知道子元素的高度）
使用定位和transform，父元素固定寬高，父相子絕，子元素top屬性50%,transform屬性為Y軸方向偏移-50%
使用定位自動外邊距，父元素，子元素固定寬高，父相子絕，子元素top，bottom屬性為0,margin在垂直方向auto
使用flex布局，父元素，子元素固定寬高，父元素使用flex布局，設(shè)置align-items屬性為center
使用flex布局，父元素，子元素固定寬高，父元素使用flex布局，設(shè)置flex-direction屬性（設(shè)置主軸方向）為column（縱軸）,justify-content屬性設(shè)置主軸上的對齊方式為center
使用 display：table-cell ，父元素固定寬高，父元素設(shè)置display:table，子元素設(shè)置display:table-cell，并且vertical-align:middle
transition和animation的區(qū)別：
animation和transition大部分屬性是相同的，他們都是隨時間改變元素的屬性值，他們的主要區(qū)別是transition需要觸發(fā)一個事件才能改變屬性，而animation不需要觸發(fā)任何事件的情況下才會隨時間改變屬性值，并且transition為2幀，從from .... to，而animation可以一幀一幀的。
animation屬性
name 設(shè)置動畫的名稱，
duration 設(shè)置動畫完成的周期，
timing-function 設(shè)置動畫的速度曲線，
delay 設(shè)置動畫什么時候開始，
iteration-count 設(shè)置動畫播放的次數(shù)，
direction 規(guī)定下一個周期是否逆向的播放，
play-state 動畫是否正在進行或者暫停，
fill-mode 設(shè)置動畫停了之后位置什么狀態(tài)transition屬性
property 去設(shè)置過渡效果的屬性名稱，
duration 設(shè)置過渡效果的周期，
timing-function 規(guī)定速度效果的速度曲線，
delay 設(shè)定過渡效果什么時候開始；區(qū)別：
transition 是過渡，是樣式值的變化的過程，只有開始和結(jié)束；animation 其實也叫關(guān)鍵幀，通過和 @keyframe 結(jié)合可以設(shè)置中間幀的一個狀態(tài)；
animation 配合 @keyframe 可以不觸發(fā)事件就觸發(fā)這個過程，而 transition 需要通過 hover 或者 js 事件來配合觸發(fā)；
animation 可以設(shè)置很多的屬性，比如循環(huán)次數(shù)，動畫結(jié)束的狀態(tài)等等，transition 只能觸發(fā)一次；
animation 可以結(jié)合 keyframe 設(shè)置每一幀，但是 transition 只有兩幀；
在性能方面：瀏覽器有一個主線程和排版線程；主線程一般是對 js 運行的、頁面布局、生成位圖等等，然后把生成好的位圖傳遞給排版線程，而排版線程會通過 GPU 將位圖繪制到頁面上，也會向主線程請求位圖等等；我們在用使用 animation 的時候這樣就可以改變很多屬性，像我們改變了 width、height、position 等等這些改變文檔流的屬性的時候就會引起，頁面的回流和重繪，對性能影響就比較大，但是我們用 transition 的時候一般會結(jié)合 transform 來進行旋轉(zhuǎn)和縮放等不會生成新的位圖，當然也就不會引起頁面的重排了；
transition、transform和translate這三者
transform是轉(zhuǎn)換，指的是改變所在元素的外觀，它有很多種手段(轉(zhuǎn)換函數(shù))來改變外觀，例如 位移、縮放、旋轉(zhuǎn)等，而其中的位移的函數(shù)名就叫translate，所以說，translate是transform的一部分。
transform: [轉(zhuǎn)換函數(shù)];
屬性函數(shù)：
translate(x, y)：元素位移，元素偏移的x軸和y軸距離，可為負
scale(x, y)：元素縮放，元素x軸和y軸縮放的倍數(shù)，小于1為縮小，大于1位放大，小于0效果和為0時相等
rotate(angle)：元素旋轉(zhuǎn)，旋轉(zhuǎn)的角度，單位deg，順時針旋轉(zhuǎn)
transform: translate(-10px, 10px);//當前元素往上移動 10 像素，往右移動 10 像素。 transform: translate(10px, 10px) rotate(10deg);//指定多個轉(zhuǎn)換效果。 復(fù)制代碼
transition是過渡，指的是某個CSS屬性值如何平滑的進行改變，就是平常說的 動效。而transform是沒有動畫效果，你改變了它的值，元素的樣子就唰的改變了。
transition: [屬性名] [持續(xù)時間] [速度曲線] [延遲時間]; transition: height 2s ease .5s;//高度屬性的值改變時，延遲 0.5 秒后以 ease 曲線進行過渡，持續(xù)2秒。 復(fù)制代碼
visibility=hidden, opacity=0，display:none：
opacity=0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點擊該區(qū)域，也能觸發(fā)點擊事件的方法。
visibility=hidden，該元素隱藏起來了，但不會改變頁面布局，但是不會觸發(fā)該元素已經(jīng)綁定的事件。
display=none，把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪除掉一樣。
position屬性比較：
固定定位fixed：
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。 Fixed定位的元素和其他元素重疊。
相對定位relative：相對于他原本的位置進行移動
如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。 在使用相對定位時，無論是否進行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它框。
絕對定位absolute：相對于他的父元素進行移動
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>。 absolute 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。 absolute 定位的元素和其他元素重疊。
粘性定位sticky：
先是相對于他原本的位置進行移動，然后在超出目標區(qū)域后，固定在目標位置，即先按照relative定位方式定位，然后按照fix定位方式定位。 元素先按照普通文檔流定位，然后相對于該元素在流中的flow root（BFC）和 containing block（最近的塊級祖先元素）定位。而后，元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。
默認定位Static：
默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right 或者 z-index 聲明）。
繼承定位inherit:
規(guī)定應(yīng)該從父元素繼承position 屬性的值。
浮動清除的幾種方法：
方法一：使用帶clear屬性的空元素
在浮動元素后使用一個空元素如<div class="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
方法二：使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發(fā) hasLayout ，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1。
在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
方法三：給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內(nèi)部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。
方法四：使用鄰接元素處理
什么都不做，給浮動元素后面的元素添加clear屬性。
方法五：使用CSS的:after偽元素
結(jié)合:after 偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）和 IEhack ，可以完美兼容當前主流的各大瀏覽器，這里的 IEhack 指的是觸發(fā) hasLayout。
給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素（Block element）清理浮動。
CSS選擇器有哪些，優(yōu)先級呢：
CSS的四種基本選擇器和四種高級選擇器：
基本選擇器：
標簽選擇器：針對一類標簽
P{}：選擇所有<p>元素
ID選擇器：針對某一個特定的標簽使用
#id{}：選擇所有id="firstname"的元素
類選擇器：針對你想要的所有標簽使用
.class{}：選擇所有class="intro"的元素
通用選擇器（通配符）：針對所有的標簽都適用（不建議使用）
：選擇所有元素
高級選擇器：
后代選擇器：用空格隔開
div p： 選擇<div>元素內(nèi)的所有<p>元素
div>p： 選擇所有父級是 <div> 元素的 <p> 元素
div+p： 選擇所有緊接著<div>元素之后的<p>元素
屬性選擇器：帶有屬性或指定屬性內(nèi)容
[target]：選擇所有帶有target屬性元素
[target=-blank]：選擇所有使用target="-blank"的元素
[title~=flower]：選擇標題屬性包含單詞"flower"的所有元素
[lang|=en]：選擇 lang 屬性以 en 為開頭的所有元素
交集選擇器：用.隔開
h3.special：選擇<h3>標簽并且類是.special的標簽
并集選擇器（分組選擇器）：用逗號隔開
div,p： 選擇所有<div>元素和<p>元素
p,h1,#mytitle,.one：選擇所有帶有p,h1,id="mytitle",class="one"的標簽
偽類選擇器：
靜態(tài)偽類選擇器：
a:link：選擇所有未訪問鏈接
a:visited：選擇所有訪問過的鏈接
動態(tài)偽類選擇器：
a:active：選擇活動鏈接
a:hover：選擇鼠標在鏈接上面時
input:focus：選擇具有焦點的輸入元素
序偽類選擇器：
p:first-letter：選擇每一個p元素的第一個字母
p:first-line：選擇每一個p元素的第一行
p:first-child：指定只有當p元素是其父級的第一個子級的樣式。
p:before：在每個p元素之前插入內(nèi)容
p:after：在每個p元素之后插入內(nèi)容
Css3新增選擇器： p~ul：選擇p元素之后的每一個ul元素
a[src^"ttps"]：選擇每一個src屬性的值以"https "開頭的元素
a[src$=". pdf"]：選擇每一個src屬性的值以” pdf結(jié)尾的元素
a[src*=" runoob"]：選擇每一個src屬性的值包含子字符串" 'runoob"的元素
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元素是其父級的第二個子元素
p::nth-child(-n+3):選擇每個p元素是其父級的前三個子元素
p:th-last-child(2)：選擇每個p元素的是其父級的第二個子元素,從最后一個子項計數(shù)
p:th-of-type(2)：選擇每個p元素是其父級的第二個p元素
p:nth-last-of-type(2)：選擇每個p元素的是其父級的第二個p元素， 從最后一個子項計數(shù)
p:last-child：選擇每個p元素是其父級的最后-個子級。
.root：選擇文檔的根元素
p:empty：選擇每個沒有任何子級的p元素(包括文本節(jié)點)
#news:target：選擇當前活動的#news元素(包含該錨名稱的點擊的URL)
inputenabled：選擇每一個已啟用的輸入元素
input:disabled：選擇每一個禁用的輸入元素
input.checked：選擇每個選中的輸入元素
:not(p)：選擇每個并非p元素的元素
:selection：匹配元素中被用戶選中或處于高亮狀態(tài)的部分
:out-of-range：匹配值在指定區(qū)間之外的input元素
:in-range：匹配值在指定區(qū)間之內(nèi)的input元素
.read-write：用于匹配可讀及可寫的元素
:read-only：用于匹配設(shè)置"readonly" (只讀)屬性的元素
:optional：用于匹配可選的輸入元素
.required：用于匹配設(shè)置了"required" 屬性的元素
valid：用于匹配輸入值為臺法的元素
cinvalid：用于匹配輸入值為非法的元素
Css選擇器優(yōu)先級：
在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式。
作為style屬性寫在元素內(nèi)的樣式
id選擇器
類選擇器
元素選擇器
通配符選擇器
瀏覽器自定義或繼承
margin塌陷和合并問題：
首先，margin塌陷是相對于父子級關(guān)系的兩個元素，而margin合并是相對兩個兄弟級關(guān)系的兩個元素
兩個兄弟級關(guān)系的元素，垂直方向上的margin，其外邊距會發(fā)生重疊現(xiàn)象，兩者兩個的外邊距取的是兩個所設(shè)置margin的最大值，就是所說的margin合并問題
兩個父子級關(guān)系的元素，垂直方向上的margin會粘合在一起，外層和模型的margin-top取兩個元素中margin-top的最大值，發(fā)生margin塌陷的內(nèi)層元素相對于整個文檔移動
解決方案：兩者都可以通過觸發(fā)BFC來解決
什么是BFC：
直譯成：塊級格式化上下文，是一個獨立的渲染區(qū)域，并且有一定的布局規(guī)則。
BFC區(qū)域不會與float box重疊。
BFC是頁面上的一個獨立容器，子元素不會影響到外面。
計算BFC的高度時，浮動元素也會參與計算。
并且在一個BFC中，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
哪些元素會生成BFC：
float不為none的元素
position為fixed和absolute的元素
display為inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不為visible的元素
inline-block、inline和block的區(qū)別：
Block是塊級元素，其前后都會有換行符，能設(shè)置寬度，高度，margin/padding水平垂直方向都有效。
Inline：設(shè)置width和height無效，margin在豎直方向上無效，padding在水平方向垂直方向都有效，前后無換行符
Inline-block：能設(shè)置寬度高度，margin/padding水平垂直方向 都有效，前后無換行符
px、em、rem、%、vw、vh、vm這些單位的區(qū)別
em:參考的是父元素的font-size，具有繼承的特點，如果自身定義了font-size則按自身來計算（瀏覽器默認字體是16px），整個頁面內(nèi)1em不是一個固定的值
rem:相對于根元素html，可以設(shè)置根元素html的font-size為10px，則1.2em就是12px；
vw:css3新單位，view width的縮寫，是指可視窗口的高度，假如寬度是1200px,則10vw就是120px；舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。
Vh:類似vw，指的是可視窗口的高度。
Vm:相對于視口的寬度或高度中較小的那個，其中最小的單位被均分為100個單位，舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
flex布局：
常用的Flex屬性：
display：指定 HTML 元素盒子類型。
flex-direction：指定了彈性容器中子元素的排列方式
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項排在最上面。
justify-content：設(shè)置彈性盒子元素在主軸（橫軸）方向上的對齊方式。
flex-start：彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放。
flex-end：彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放。
center：彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
space-between：彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。
align-items：設(shè)置彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長? + 度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
flex-wrap：設(shè)置彈性盒子的子元素超出父容器時是否換行。
nowrap - 默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。
wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行
wrap-reverse -反轉(zhuǎn) wrap 排列。
align-content：修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對齊，而是設(shè)置行對齊。
stretch - 默認。各行將會伸展以占用剩余的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結(jié)束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
flex-flow：flex-direction 和 flex-wrap 的簡寫
order：設(shè)置彈性盒子的子元素排列順序。
integer：用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨撝?。
align-self：在彈性子元素上使用。覆蓋容器的 align-items 屬性。
auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側(cè)軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
flex：設(shè)置彈性盒子的子元素如何分配空間。
auto: 計算值為 1 1 auto
initial: 計算值為 0 1 auto
none：計算值為 0 0 auto
inherit：從父元素繼承
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基準值。
流式布局與響應(yīng)式布局的區(qū)別：
常用的Flex屬性：
流式布局：使用非固定像素來定義網(wǎng)頁內(nèi)容，也就是百分比布局，通過盒子的度設(shè)置成百分比來根據(jù)屏幕的寬度來進行伸縮，不受固定像素的限制，內(nèi)容自動填充。
響應(yīng)式布局，利用css3中的Media Query(媒介查詢)，通過查詢screen的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局 超小屏幕(移動設(shè)備):768px以下 小屏設(shè)備：768px-992px;
中屏設(shè)備：992-1200px；
寬屏設(shè)備：1200px以上
由于響應(yīng)式布局開發(fā)顯得繁瑣，一般使用第三方響應(yīng)式框架來完成，比如bootstrap來完成一部分工作
三欄布局的實現(xiàn)方式：
常用的Flex屬性：
浮動
三欄設(shè)置高度，左右欄固定寬度，并分別設(shè)置左右浮動
優(yōu)點：兼容性好
缺點：浮動脫離文檔流，需要做清除浮動的處理
絕對定位
父級元素設(shè)置絕對定位，左右欄固定寬度，左欄設(shè)置left:0；右欄設(shè)置right:0；中間欄設(shè)置left和right分別為左右欄的寬度
優(yōu)點：快捷，不容易出問題
缺點：布局脫離文檔流，子元素也必須脫離文檔流，可使用性較差
Flex布局
父元素設(shè)置display:flex，左右欄固定寬度，中間欄設(shè)置flex:1，占據(jù)剩余空間
優(yōu)點：較為完美，移動端布局多屬flex
表格布局
父元素設(shè)置display:table,左右中三欄全部設(shè)置display:table-cell,左右欄固定寬度
優(yōu)點：兼容性好
缺點：操作繁瑣，當其中一個單元格高度變大，其他單元格高度會隨之變大
網(wǎng)格布局
父元素設(shè)置display:grid，固定寬度，grid-template-rows: 100px;grid-template-columns: 300px auto 300px;優(yōu)點：可以做許多復(fù)雜的事情，代碼比較簡潔
缺點：新技術(shù)，低版本瀏覽器兼容性不好
