第136天：Web前端面試題總結（理論）

時間 2019-11-09

標籤 136天 web 端面試題總結理論欄目 HTML 简体版

原文原文鏈接

Web前端面試題總結

HTML+CSS理論知識

1、講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼

　　a. 域名解析php

　　b. 發起TCP的3次握手css

　　c. 創建TCP鏈接後發起http請求html

　　d. 服務器端響應http請求，瀏覽器獲得html代碼前端

　　e. 瀏覽器解析html代碼，並請求html代碼中的資源html5

　　f. 瀏覽器對頁面進行渲染呈現給用戶git

2、談談你對前端性能優化的理解

　　a. 請求數量：合併腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域程序員

　　b. 請求帶寬：開啓GZip，精簡JavaScript，移除重複腳本，圖像優化，將icon作成字體github

　　c. 緩存利用：使用CDN，使用外部JavaScript和CSS，添加Expires頭，減小DNS查找，配置ETag，使AjaX可緩存web

　　d. 頁面結構：將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出面試

　　e. 代碼校驗：避免CSS表達式，避免重定向

3、前端 MV*框架的意義

早期前端都是比較簡單，基本以頁面爲工做單元，內容以瀏覽型爲主，也偶爾有簡單的表單操做，基本不太須要框架.

隨着 AJAX 的出現，Web2.0的興起，人們能夠在頁面上能夠作比較複雜的事情了，而後前端框架才真正出現了。

若是是頁面型產品，多數確實不太須要它，由於頁面中的 JavaScript代碼，處理交互的絕對遠遠超過處理模型的，可是若是是應用軟件類產品，這就太須要了。

長期作某個行業軟件的公司，通常都會沉澱下來一些業務組件，主要體如今數據模型、業務規則和業務流程，這些組件基本都存在於後端，在前端不多有相應的組織。

從協做關係上講，不少前端開發團隊每一個成員的職責不是很清晰，有了前端的 MV框架，這個情況會大有改觀。

之因此感覺不到 MV*框架的重要性，是由於Model部分代碼較少，View的相對多一些。若是主要在操做View和Controller，那固然 jQuery 這類庫比較好用了。

4、請簡述盒模型

IE6盒子模型與W3C盒子模型。

文檔中的每一個元素被描繪爲矩形盒子。盒子有四個邊界：外邊距邊界margin, 邊框邊界border, 內邊距邊界padding與內容邊界content。

CSS3中有個box-sizing屬性能夠控制盒子的計算方式，

content-box：padding和border不被包含在定義的width和height以內。對象的實際寬度等於設置的width值和border、padding之和。（W3C盒子模型）

border-box：padding和border被包含在定義的width和height以內。對象的實際寬度就等於設置的width值。（IE6盒子模型）

5、請你談談Cookie的弊端

　　a. 每一個特定的域名下最多生成的cookie個數有限制

　　b. IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie

　　c. cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節

　　d. 安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。

6、瀏覽器本地存儲

　　在HTML5中提供了sessionStorage和localStorage.

　　sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬，是會話級別的存儲。

　　localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

7、web storage和cookie的區別

　　a. Cookie的大小是受限的

　　b. 每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬

　　c. cookie還須要指定做用域，不能夠跨域調用

　　d. Web Storage擁有setItem,getItem等方法，cookie須要前端開發者本身封裝setCookie，getCookie

　　e. Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生

　　f. IE7、IE6中的UserData經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage

8、線程與進程的區別

　　a. 一個程序至少有一個進程，一個進程至少有一個線程

　　b. 線程的劃分尺度小於進程，使得多線程程序的併發性高

　　c. 進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率

　　d. 每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制

　　e. 多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配

9、請說出三種減小頁面加載時間的方法

　　a. 儘可能減小頁面中重複的HTTP請求數量

　　b. 服務器開啓gzip壓縮

　　c. css樣式的定義放置在文件頭部

　　d. Javascript腳本放在文件末尾

　　e. 壓縮合並Javascript、CSS代碼

　　f. 使用多域名負載網頁內的多個文件、圖片

10、你都使用哪些工具來測試代碼的性能？

　　JSPerf, Dromaeo

11、你遇到過比較難的技術問題是？你是如何解決的？

12、常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

13、列舉IE與其餘瀏覽器不同的特性？

　　a. IE的排版引擎是Trident （又稱爲MSHTML）

　　b. Trident內核曾經幾乎與W3C標準脫節（2005年）

　　c. Trident內核的大量 Bug等安全性問題沒有獲得及時解決

　　d. JS方面，有不少獨立的方法，例如綁定事件的attachEvent、建立事件的createEventObject等

　　e. CSS方面，也有本身獨有的處理方式，例如設置透明，低版本IE中使用濾鏡的方式

14、什麼叫優雅降級和漸進加強？

　　漸進加強 progressive enhancement：

　　針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

　　優雅降級 graceful degradation：

　　一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：

　　a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給

　　b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

　　c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

15、WEB應用從服務器主動推送Data到客戶端有那些方式？

　　a. html5 websoket

　　b. WebSocket 經過 Flash

　　c. XHR長時間鏈接

　　d. XHR Multipart Streaming

　　e. 不可見的Iframe

　　f. <script>標籤的長時間鏈接(可跨域)

16、對前端界面工程師這個職位是怎麼樣理解的？

　　a. 前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好

　　b. 參與項目，快速高質量完成實現效果圖，精確到1px；

　　c. 與團隊成員，UI設計，產品經理的溝通；

　　d. 作好的頁面結構，頁面重構和用戶體驗；

　　e. 處理hack，兼容、寫出優美的代碼格式；

　　f. 針對服務器的優化、擁抱最新前端技術。

17、平時如何管理你的項目？

　　a. 先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

　　b. 編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

　　c. 標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

　　d. 頁面進行標註（例如頁面模塊開始和結束）；

　　e. CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

　　f. JS 分文件夾存放命名以該JS功能爲準的英文翻譯。

　　g. 圖片採用整合的 images.png png8 格式文件使用儘可能整合在一塊兒使用方便未來的管理

18、說說最近最流行的一些東西吧？常去哪些網站？

CSDN、SegmentFault、php.net、MDN、css參考手冊、iconfont、

underscore、github、Bootstrap、W3Shool、W3Cplus、caniuse

19、請解釋一下 JavaScript 的同源策略

　　同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

　　指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

20、AMD和CMD 規範的區別？

　　AMD 提早執行依賴 - 儘早執行，requireJS 是它的實現

　　CMD 按需執行依賴 - 懶執行，seaJS 是它的實現

21、網站重構的理解

　　重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。

　　a. 使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

　　b. 對於移動平臺的優化，針對於SEO進行優化

　　c. 減小代碼間的耦合，讓代碼保持彈性

　　d. 壓縮或合併JS、CSS、image等前端資源

22、瀏覽器的內核分別是什麼?

　　IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

23、請介紹下cache-control

　　每一個資源均可以經過 Cache-Control HTTP 頭來定義本身的緩存策略

　　Cache-Control 指令控制誰在什麼條件下能夠緩存響應以及能夠緩存多久

　　Cache-Control 頭在 HTTP/1.1 規範中定義，取代了以前用來定義響應緩存策略的頭（例如 Expires）。

24、前端頁面有哪三層構成，分別是什麼？做用是什麼？

　　a. 結構層：由 HTML 或 XHTML 之類的標記語言負責建立，僅負責語義的表達。解決了頁面「內容是什麼」的問題。

　　b. 表示層：由CSS負責建立，解決了頁面「如何顯示內容」的問題。

　　c. 行爲層：由腳本負責。解決了頁面上「內容應該如何對事件做出反應」的問題。

25、知道的網頁製做會用到的圖片格式有哪些？

　　png-8，png-24，jpeg，gif，svg

　　Webp：谷歌（google）開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。

　　Apng：全稱是「Animated Portable Network Graphics」, 是PNG的位圖動畫擴展，能夠實現png格式的動態圖片效果。04年誕生，但一直得不到各大瀏覽器廠商的支持，直到日前獲得 iOS safari 8的支持，有望代替GIF成爲下一代動態圖標準。

26、一次js請求通常狀況下有哪些地方會有緩存處理？

　　a. 瀏覽器端存儲

　　b. 瀏覽器端文件緩存

　　c. HTTP緩存304

　　d. 服務器端文件類型緩存

　　e. 表現層&DOM緩存

27、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。

　　a. 圖片懶加載，滾動到相應位置才加載圖片。

　　b. 圖片預加載，若是爲幻燈片、相冊等，將當前展現圖片的前一張和後一張優先下載。

　　c. 使用CSSsprite，SVGsprite，Iconfont、Base64等技術，若是圖片爲css圖片的話。

　　d. 若是圖片過大，可使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提升用戶體驗。

28、談談之前端角度出發作好SEO須要考慮什麼？

　　a. 瞭解搜索引擎如何抓取網頁和如何索引網頁

　　b. meta標籤優化

　　c. 關鍵詞分析

　　d. 付費給搜索引擎

　　e. 連接交換和連接普遍度（Link Popularity）

　　f. 合理的標籤使用

29、<img>標籤上title屬性與alt屬性的區別是什麼？

　　alt屬性是爲了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少於100個英文字符或者用戶必須保證替換文字儘量的短。

　　這包括那些使用原本就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

　　title屬性爲設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。

30、分別寫出如下幾個HTML標籤：文字加粗、下標、居中、字體

　　加粗：<b>、<strong>

　　下標：<sub>

　　居中：<center>

　　字體：<font>、<basefont>、參考《HTML標籤列表》

31、請寫出至少5個html5新增的標籤，並說明其語義和應用場景

　　section：定義文檔中的一個章節

　　nav：定義只包含導航連接的章節

　　header：定義頁面或章節的頭部。它常常包含 logo、頁面標題和導航性的目錄。

　　footer：定義頁面或章節的尾部。它常常包含版權信息、法律信息連接和反饋建議用的地址。

　　aside：定義和頁面內容關聯度較低的內容——若是被刪除，剩下的內容仍然很合理。

32、請說說你對標籤語義化的理解？

　　a. 去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構

　　b. 有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；

　　c. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

　　d. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

33、Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

　　<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。

　　嚴格模式的排版和 JS 運做模式是，以該瀏覽器支持的最高標準運行。

　　在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

　　DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

34、你知道多少種Doctype文檔類型？

　　標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

　　HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

　　XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

　　Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，

　　Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

35、HTML與XHTML——兩者有什麼區別

　　a. XHTML 元素必須被正確地嵌套。

　　b. XHTML 元素必須被關閉。

　　c. 標籤名必須用小寫字母。

　　d. XHTML 文檔必須擁有根元素。

36、html5有哪些新特性、移除了那些元素？

　　a. HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

　　b. 拖拽釋放(Drag and drop) API

　　c. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

　　d. 音頻、視頻API(audio,video)

　　e. 畫布(Canvas) API

　　f. 地理(Geolocation) API

　　g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失

　　h. sessionStorage 的數據在頁面會話結束時會被清除

　　i. 表單控件，calendar、date、time、email、url、search

　　j. 新的技術webworker, websocket等

移除的元素：

　　a. 純表現的元素：basefont，big，center, s，strike，tt，u；

　　b. 對可用性產生負面影響的元素：frame，frameset，noframes；

37、iframe的優缺點？

優勢：

　　a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

　　b. iframe無刷新文件上傳

　　c. iframe跨域通訊

缺點：

　　a. iframe會阻塞主頁面的Onload事件

　　b. 沒法被一些搜索引擎索引到

　　c. 頁面會增長服務器的http請求

　　d. 會產生不少頁面，不容易管理。

38、Quirks模式是什麼？它和Standards模式有什麼區別？

　　在寫程序時咱們也會常常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤爲是新功能不兼容舊功能時。IE6之前的頁面你們都不會去寫DTD，因此IE6就假定若是寫了DTD，就意味着這個頁面將採用對CSS支持更好的佈局，而若是沒有，則採用兼容以前的佈局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：整體會有佈局、樣式解析和腳本執行三個方面的區別。

　　a. 盒模型：在W3C標準中，若是設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

　　b. 設置行內元素的高寬：在Standards模式下，給<span>等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

　　c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，若是父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

　　d. 設置水平居中：使用margin:0 auto在standards模式下可使元素水平居中，但在quirks模式下卻會失效。

39、請闡述table的缺點

　　a. 太深的嵌套，好比table>tr>td>h3，會致使搜索引擎讀取困難，並且，最直接的損失就是大大增長了冗餘代碼量。

　　b. 靈活性差，好比要將tr設置border等屬性，是不行的，得經過td

　　c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

　　d. 混亂的colspan與rowspan，用來佈局時，頻繁使用他們會形成整個文檔順序混亂。

　　e. table須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。

　　f. 不夠語義

40、簡述一下src與href的區別

　　src用於替換當前元素；href用於在當前文檔和引用資源之間確立聯繫。

　　src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置

　　href是Hypertext Reference的縮寫，指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接

41、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

1、新特性：

　　 a.HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
b. 拖拽釋放(Drag and drop) API
　　c.語義化更好的內容標籤（header,nav,footer,aside,article,section）
　　d.音頻、視頻API(audio,video)
e.畫布(Canvas) API
f.地理(Geolocation) API
g.本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
h.sessionStorage 的數據在瀏覽器關閉後自動刪除
i.表單控件，calendar、date、time、email、url、search
j.新的技術webworker, websocket, Geolocation

2、移除元素：
　　純表現的元素：basefont，big，center，font, s，strike，tt，u；
　　對可用性產生負面影響的元素：frame，frameset，noframes；

3、h5新標籤兼容：
　　 IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
　　能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
　　固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何區分：
DOCTYPE聲明\新增的結構元素\功能元素

42、CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

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 ;

優先級：

!important > id > class > tag

important 比內聯優先級高,但內聯比 id 要高

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> 元素。

　　:enabled :disabled 控制表單控件的禁用狀態。

　　 :checked 單選框或複選框被選中。

43、CSS3有哪些新特性？

　　1、CSS3實現圓角（border-radius），陰影（box-shadow），

　　 2、對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

　　 3、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

　　4、增長了更多的CSS選擇器多背景 rgba

　　5、在CSS3中惟一引入的僞元素是::selection.

　　 6、媒體查詢，多欄佈局

　　 7、border-image

44、解釋盒模型寬高值得計算方式，邊界塌陷，負值做用，box-sizing概念？

　　1. 盒模型：IE 678 下(不添加doctype) 使用ie盒模型，寬度 = 邊框 + padding + 內容寬度； chrom、IE9+、(添加doctype) 使用標準盒模型，寬度 = 內容寬度。
　　2. box-sizing : 爲了解決標準黑子和IE盒子的不一樣，CSS3增添了盒模型屬性box-sizing，content-box(默認)，border-box 讓元素維持IE傳統盒子模型， inherit 繼承父盒子模型；
　　3. 邊界塌陷：塊元素的 top 與 bottom 外邊距有時會合並（塌陷）爲單個外邊距（合併後最大的外邊距），這樣的現象稱之爲外邊距塌陷。
　　4. 負值做用：負margin會改變浮動元素的顯示位置，即便個人元素寫在DOM的後面，我也能讓它顯示在最前面。

45、BFC（Block Formatting Context）是什麼？應用？

　　 1. BFC 就是 ‘塊級格式上下文’ 的格式，建立了BFC的元素就是一個獨立的盒子，不過只有BLock-level box能夠參與建立BFC，它規定了內部的Bloc-level Box 如何佈局，而且與這個獨立盒子裏的佈局不受外部影響，固然它也不會影響到外面的元素。
2. 應用場景：
　　 1. 解決margin疊加的問題
　　 2. 用於佈局（overflow: hidden）,BFC不會與浮動盒子疊加。
　　 3. 用於清除浮動，計算BFC高度。

46、如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

47、簡要說一下CSS的元素分類

　　塊級元素：div,p,h1,form,ul,li;
行內元素 : span,a,label,input,img,strong,em;

48、解釋下浮動和它的工做原理？清除浮動的方法

　　浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。

　　這種方法是在全部浮動標籤後面添加一個空標籤定義css clear:both. 弊端就是增長了無心義標籤。

2.使用after僞對象清除浮動

　　　該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

#parent:after{

　　content:".";

　　height:0;

　　visibility:hidden;

　　display:block;

　　clear:both;

　}

3.設置overflow爲hidden或者auto

4.浮動外部元素

49、CSS隱藏元素的幾種方法（至少說出三種）

Opacity:元素自己依然佔據它本身的位置並對網頁的佈局起做用。它也將響應用戶交互;
    Visibility:與 opacity 惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏;
    Display:display 設爲 none 任何對該元素直接打用戶交互操做都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素徹底不存在;
    Position:不會影響佈局，能讓元素保持能夠操做;

Clip-path:clip-path 屬性尚未在 IE 或者 Edge 下被徹底支持。若是要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要低;

50、請描述一下cookies，sessionStorage和localStorage的區別？

相同點：都會在瀏覽器端保存，有大小和同源限制。
不一樣點：
　　1、cookie會隨請求發送到服務器，做爲會話表示，服務器可修改cookie。web storage不會隨請求大宋到服務器。
　　 2、cookie有path的概念，子路徑能夠訪問父路徑的cookie，父路徑不能夠訪問子路徑的cookie。
　　3、有效期： cookie在設置的有效期內有效，默認爲瀏覽器關閉消失。sessionStorage在會話窗口關閉後失效，localStorage長期有效，需主動刪除。
　　 4、sessionStorage不能共享，localStorage在同源文檔之間能夠共享，cookie在同源且符合path規則的文檔之間能夠共享。
　　 5、localStorage的修改會觸發其餘文檔的update事件。
　　 6、cookie有secure屬性要求HTTPS傳輸。
7、瀏覽器不能保存超過300個cookie，單個服務器不能超過20個，每一個cookie不能超過4k。webStorage能夠支持5M的存儲。

51、什麼是語義化的HTML?

  直觀的認識標籤對於搜索引擎的抓取有好處，用正確的標籤作正確的事情！
      html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
    在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
      使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

52、link和@import有什麼區別？

link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無兼容問題;

53、常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]