瀏覽器、HTML、css 面試題
1.什麼是盒模型
盒模型（內容（content）,內邊距（padding）,邊框（border）,外邊距（margin））,值得注意的是，塊級元素可以設定寬高，內邊距，邊框，外邊距 行內元素寬高自動，並排顯示。
2.行內元素有哪些？塊級元素有哪些？ 空(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> 3.簡述src和href的區別
src和href都是屬於外部資源的引用，像一些圖片，css檔案，js檔案，或者其他的web頁面
他們的之間的主要關係可以用這樣的一句話來概括：src用於替換這個元素，而href用於建立這個標籤與外部資源的關係
href (Hypertext Reference) 表示超文字引用，href這個屬性指定web資源的位置，從而定義當前元素（如錨點a）或當前文件（如連結）與目標錨點或目標資源之間的聯絡
src (Source)源這個屬性是將資源嵌入到當前文件中元素所在的位置
當瀏覽器解析到src引用的js檔案程式碼時，頁面的載入和解析都會暫停直到瀏覽器拿到並執行完這個js檔案
4.什麼是css Hack
css hack指各版本及各品牌瀏覽器之間對CSS解釋後出現網頁內容的誤差(比如我們常說錯位)的處理。
5.什麼叫優雅降級和漸進增強
漸進增強 progressive enhancement： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
優雅降級 graceful degradation： 一開始就構建完整的功能，然後再針對低版本瀏覽器進行相容。 區別： a. 優雅降級是從複雜的現狀開始，並試圖減少使用者體驗的供給 b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要 c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶
6.px和em的區別
一、px是固定的畫素，一旦設定了就無法因為適應頁面大小而改變。
二、em和rem相對於px更具有靈活性，他們是相對長度單位，意思是長度不是定死了的，更適用於響應式佈局。
三、em是相對於其父元素來設定字型大小的，一般都是以<body>的“font-size”為基準。這樣就會存在一個問題，進行任何元素設定，都有可能需要知道他父元素的大小。而Rem是相對於根元素<html>，這樣就意味著，我們只需要在根元素確定一個參考值。
總之：對於em和rem的區別一句話概括：
em相對於父元素，rem相對於根元素
7.HTML5為什麼只需要寫<!DOCTYPE HTML>?
HTML 4.01 中的 doctype 需要對 DTD 進行引用，因為 HTML 4.01 基於 SGML。而 HTML 5 不基於 SGML，因此不需要對 DTD 進行引用，但是需要 doctype 來規範瀏覽器的行為。其中，SGML是標準通用標記語言,簡單的說，就是比HTML,XML更老的標準，這兩者都是由SGML發展而來的。BUT，HTML5不是的。
<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於 <html> 標籤之前。作用：告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以怪異模式呈現。
8.Http的狀態碼有哪些
200 OK //客戶端請求成功
301 Moved Permanently（永久移除)，請求的 URL 已移走。Response 中應該包含一個 Location URL, 說明資
源現在所處的位置
302 found 重定向
400 Bad Request //客戶端請求有語法錯誤，不能被伺服器所理解
401 Unauthorized //請求未經授權，這個狀態程式碼必須和 WWW-Authenticate 報頭域一起使用
403 Forbidden //伺服器收到請求，但是拒絕提供服務
404 Not Found //請求資源不存在，eg：輸入了錯誤的 URL
500 Internal Server Error //伺服器發生不可預期的錯誤
503 Server Unavailable //伺服器當前不能處理客戶端的請求，一段時間後可能恢復正常
9.一次完整的HTTP事務是怎麼一個過程
域名解析 --> 發起TCP的3次握手 --> 建立TCP連線後發起http請求 --> 伺服器響應http請求，瀏覽器得到html程式碼 --> 瀏覽器解析html程式碼，並請求html程式碼中的資源（如js、css、圖片等） --> 瀏覽器對頁面進行渲染呈現給使用者
11.瀏覽器是如何渲染頁面的
解析文件構建DOM樹--構建渲染樹----佈局與繪製渲染樹
12.瀏覽器的核心有哪些？分別有什麼代表的瀏覽器。 css字首為 ie -ms- 谷歌-webkit- 火狐 -moz- Opera(歐朋),NDSBrowser -o- safari 之前是 -khtml-- rident 核心：IE，搜狗高速瀏覽器等
- Gecko 核心：Mozilla Firefox（火狐瀏覽器），Netscape6及以上版本
- Webkit 核心：Safari 、曾經的 Chrome
- Presto 核心：Opera 7到Opera12.17（歐朋瀏覽器）之間的版本採用的核心
- Blink 核心：現在 Chrome 核心是 Blink，Opera現已改用Google Chrome的Blink核心
14.如何優化影象，影象格式的區別
優化影象：
1、不用圖片，儘量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2、 使用向量圖SVG替代點陣圖。對於絕大多數圖案、圖示等，向量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支援SVG了，所以可放心使用！
3.、使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類的，適用於JPEG。
而修飾圖片通常更適合用無失真壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視訊格式，或用SVG動畫取代。
4、按照HTTP協議設定合理的快取。
5、使用字型圖示webfont、CSS Sprites等。
6、用CSS或JavaScript實現預載入。
7、WebP圖片格式能給前端帶來的優化。WebP支援無損、有失真壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，非常適合用於網路等圖片傳輸。
影象格式的區別：
向量圖：圖示字型，如 font-awesome；svg
點陣圖：gif,jpg(jpeg),png
區別：
1、gif:是是一種無損，8點陣圖片格式。具有支援動畫，索引透明，壓縮等特性。適用於做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於允許輕微失真的色彩豐富的照片，不適合做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。後面的數字代表這種PNG格式最多可以索引和儲存的顏色值。
關於透明：PNG8支援索引透明和alpha透明;PNG24不支援透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;
優缺點：
1、能在保證最不失真的情況下儘可能壓縮影象檔案的大小。
2、對於需要高保真的較複雜的影象，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。
15.列舉你瞭解Html5. Css3 新特性 見https://www.cnblogs.com/star91/p/5659134.html
16.可以通過哪些方法優化css3 animation渲染 見https://blog.csdn.net/u014628388/article/details/81665345
17.列舉幾個前端效能方面的優化 1.1減少http請求--
- 合併js檔案
- 合併css檔案
- 雪碧圖的使用(css sprite)
- 使用base64表示簡單的圖片
1.2減小資源體積：可以通過以下幾個方面進行實施：
- gzip壓縮
- js混淆
- css壓縮
- 圖片壓縮
1.3快取：可以通過以下幾個方面來描述：
- DNS快取
- CDN部署與快取
- http快取
1.4移動端優化：使用以下幾種方式來加快移動端網路方面的優化：
- 使用長cache，減少重定向
- 首屏優化，保證首屏載入資料小於14kb
- 不濫用web字型
優化網頁渲染：
- css的檔案放在頭部，js檔案放在尾部或者非同步
- 儘量避免內聯樣式
18.如何實現同一個瀏覽器多個標籤頁之間的通訊
https://blog.csdn.net/liwenfei123/article/details/79996161 見
19.瀏覽器的儲存技術有哪些 見https://www.jianshu.com/p/baa0b62a372e
20.css定位方式
1、static（靜態定位）：
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
2、relative（相對定位）：
定位為relative的元素脫離正常的文件流，但其在文件流中的位置依然存在，只是視覺上相對原來的位置有移動。
通過top,bottom,left,right的設定相對於其正常（原先本身）位置進行定位。可通過z-index進行層次分級 。
3、absolute（絕對定位）：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
定位為absolute的層脫離正常文件流，但與relative的區別是其在正常流中的位置不再存在。
這個屬性總是有人給出誤導。說當position屬性設為absolute後，總是按照瀏覽器視窗來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。
4、fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。21.儘可能多的寫出瀏覽器相容性問題 https://blog.csdn.net/pedrojuliet/article/details/69945325
22.垂直上下居中的方法
方法一:
絕對定位方法：不確定當前div的寬度和高度，採用transform:translate(-50%,-50%); 當前div的父級新增相對定位（position: relative;）
方法二:
絕對定位方法：確定了當前div的寬度，margin值為當前div寬度一半的負值
方法三：
絕對定位方法：絕對定位下top left right bottom 都設定0，margin:auto
方法四:
flex佈局方法：當前div的父級新增flex css樣式
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}
方法五:
table-cell實現水平垂直居中:table-cell middle center組合使用
display: table-cell;
vertical-align: middle;
text-align: center;
方法六:
絕對定位：calc() 函式動態計算實現水平垂直居中
見https://www.cnblogs.com/a-cat/p/9019184.html
23.響應式佈局原理 https://www.jianshu.com/p/d0d29fb7647f25.清除浮動的方法 1.額外標籤法（在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；）（不推薦） eg:.clear(clear:both) <div class="clear">額外標籤法</div> 2.父級新增overflow屬性（父元素新增overflow:hidden）（不推薦） eg:.fahter{ width: 400px;
border: 1px solid deeppink;
overflow: hidden;
} 內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素
3.使用after偽元素清除浮動（推薦使用）
.clearfix:after{/*偽元素是行內元素 正常瀏覽器清除浮動方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
}
4.使用before和after雙偽元素清除浮動
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
27.重新整理頁面，js請求一般會有哪些地方有快取處理
28.如何對網站的檔案和資源進行優化
29.你對網頁標準和W3C重要性的理解
30.Http和https的區別
31.data-屬性的作用
32.如何讓Chrome瀏覽器顯示小於12px的文字
33.哪些操作會引起頁面迴流（Reflow）
34.CSS前處理器的比較less sass
35.如何實現頁面每次開啟時清除本頁快取
36.什麼是Virtual DOM,為何要用Virtual DOM
37.偽元素和偽類的區別
38.http的幾種請求方法和區別
39.前端需要注意哪些SEO
40.的title和alt有什麼區別
41.從瀏覽器位址列輸入url到顯示頁面的步驟
42.如何進行網站效能優化
43.語義化的理解
44.HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
45.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢
46.iframe有那些缺點？
47.WEB標準以及W3C標準是什麼?
48.Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
49.HTML全域性屬性(global attribute)有哪些
50.Canvas和SVG有什麼區別？
51.如何在頁面上實現一個圓形的可點選區域？
52.網頁驗證碼是幹嘛的，是為了解決什麼安全問題
53.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
54.CSS選擇器有哪些？哪些屬性可以繼承？
55.CSS優先順序演算法如何計算？
56.CSS3有哪些新特性？
57.請解釋一下CSS3的flexbox（彈性盒佈局模型）,以及適用場景？
58.用純CSS建立一個三角形的原理是什麼？
59.常見的相容性問題？
60.為什麼要初始化CSS樣式
61.absolute的containing block計算方式跟正常流有什麼不同？
62.CSS裡的visibility屬性有個collapse屬性值？在不同瀏覽器下以後什麼區別？
63.display:none與visibility：hidden的區別？
64.position跟display、overflow、float這些特性相互疊加後會怎麼樣？
65.對BFC規範(塊級格式化上下文：block formatting context)的理解？
66.為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式？
67.上下margin重合的問題
68.設定元素浮動後，該元素的display值是多少？
69.移動端的佈局用過媒體查詢嗎？
70.CSS優化、提高效能的方法有哪些？
71.瀏覽器是怎樣解析CSS選擇器的？
72.在網頁中的應該使用奇數還是偶數的字型？為什麼呢？
73.margin和padding分別適合什麼場景使用？
74.元素豎向的百分比設定是相對於容器的高度嗎？
75.全屏滾動的原理是什麼？用到了CSS的哪些屬性？
76.什麼是響應式設計？響應式設計的基本原理是什麼？如何相容低版本的IE？
77.視差滾動效果？
78.::before 和 :after中雙冒號和單冒號有什麼區別？解釋一下這2個偽元素的作用
79.讓頁面裡的字型變清晰，變細用CSS怎麼做？
80.position:fixed;在android下無效怎麼處理？
81.如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？
82 .li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
83.display:inline-block 什麼時候會顯示間隙？
84.有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度
85.png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
86.style標籤寫在body後與body前有什麼區別？
87.CSS屬性overflow屬性定義溢位元素內容區的內容會如何處理?
88.闡述一下CSS Sprites
src和href都是屬於外部資源的引用，像一些圖片，css檔案，js檔案，或者其他的web頁面
他們的之間的主要關係可以用這樣的一句話來概括：src用於替換這個元素，而href用於建立這個標籤與外部資源的關係
href (Hypertext Reference) 表示超文字引用，href這個屬性指定web資源的位置，從而定義當前元素（如錨點a）或當前文件（如連結）與目標錨點或目標資源之間的聯絡
src (Source)源這個屬性是將資源嵌入到當前文件中元素所在的位置
當瀏覽器解析到src引用的js檔案程式碼時，頁面的載入和解析都會暫停直到瀏覽器拿到並執行完這個js檔案。這就像是把js檔案裡的內容全部注入到這個script標籤中，類似於img，img標籤是一個空標籤，它的內容就是由src這個屬性定義，瀏覽器會暫停載入直到這個圖片載入完成。這也是為什麼要將js檔案的載入放在body最後的原因（在前面）