前端工做面試問題（上）

時間 2019-11-08

原文原文鏈接

前段時間專心整理一下關於前端的面試問題。感謝耐心盡責的楷豪和聞東師兄最近給咱們的指導和建議。你們能夠經過這些問題，你們能夠順便看如下本身的水平。javascript

https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinesephp

我也利用課餘時間（三天沒安排課程的下午晚上）嘗試寫下本身的答案，水平有限，望體諒。css

暫時只提供上半部分，下半部通過一段時間努力，也已經更新「前端工做面試問題（下）」。html

你在昨天/本週學到了什麼？

　　這段事件一直在整理有關前端的面試題目，整理這也題目，不僅是爲了可以學習應付即將到來的面試，更是爲了補補基礎知識。平常項目開發進度太快了，不少屬性或者方法用了就忘，這樣會形成另一個隱患，由於基本知識不夠紮實，經常使用的方法用得不夠熟練，就很難高效率地開發項目。前端

　　有了紮實的基礎知識，才能其期盼本身走得更遠。html5

　　1）知道W3C的標準，因而在編寫html時候會規避「標籤不閉合，亂嵌套，大小寫混雜」可能形成不一樣瀏覽器展現不一致的隱患。java

　　2）知道了CSS的「層疊」規則，整理而且對比了清楚浮動和實現居中的方法，還發現了一些不經常使用屬性。因而，有利於往後高效地編寫樣式表。linux

　　等等，等等css3

編寫代碼的哪些方面可以使你興奮或感興趣？

　　編寫代碼最讓我興奮的是學習新的技術，嘗試新的視覺效果的過程。git

　　例如topview招新網站上，考慮到往後頁面上因爲豐富的交互和功能，腳本文件較大。雖然通常瀏覽器對文件有異步加載功能，可是這些文件指的是圖片視頻樣式表等，不包含腳本，也就是說當加載腳本的時候會形成堵塞，腳本的加載會堵塞頁面上的圖片加載，也就是說由於腳本文件過大，用戶可能須要等待較長的事件。當頁面內部的腳本等基本元素沒加載完畢，當時樣式和結構已經加載完後，css3動畫出現，四個小球流暢地旋轉滾動直到腳本徹底加載完畢。

　　前端自己就是一個美好有趣的領域。對於衆多的網站或者系統來講，後臺提供的功能纔是核心模塊，可是關乎網站或者系統是否可以持續地吸引用戶的眼球，可否在一樣類型的產品中脫穎而出，也許前端的交互是否人性化和性能是否穩定高效佔了絕大多數因素。良好的用戶體驗，給他們積極高效的用戶體驗，甚至改變大衆的生活方式，這正是我當初學習編程的初衷。

（面試官也許會問得：是怎麼實現這個效果的或者關於用戶體驗方面你還作過哪些努力，不要緊，我認真作了準備。甚至要對比一下css3過渡和動畫的區別，鑑於篇幅有限，關於css3的具體使用就不在這裏列舉，用戶體驗方面的答案，下面會作回答。）

/*@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。*/
@-webkit-keyframes spin {
　　0% {
　　　　-webkit-transform:rotate(0deg);
　　}
　　50% {
　　　　-webkit-transform:rotate(-180deg);
　　}
　　100% {
　　　　-webkit-transform:rotate(-360deg);
　　}
}
/*使用 @keyframes 中建立動畫，須要把它捆綁到某個選擇器，不然不會產生動畫效果。
經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：
　　　　規定動畫的名稱
　　　　規定動畫的時長
*/
-webkit-animation:spin 1.5s linear infinite;
-moz-animation:spin 1.5s linear infinite;

具體能夠參考：http://www.w3school.com.cn/css3/css3_animation.asp

聞東師兄推薦：http://www.tuicool.com/articles/NBbQjy3

在製做一個Web應用或Web站點的過程當中，你是如何考慮它的UI、安全性、高性能、SEO、可維護性以及技術因素的？

（若是問我這個問題，我會很興奮的，由於能夠說半個小時。）

談談你喜歡的開發環境。(例如操做系統，編輯器，瀏覽器，工具等等。)

　　（有兩套開發環境，一套是用來平時團隊項目的開發，個人jdk、tomcat、photoshop等等都部署安裝在wins系統上面；另一套是用來「裝逼」的，呃，對於我這種選擇困難症病人，糾結了一下最後決定說說「裝逼」的那套開發環境）

　　操做系統用的是linux的ubuntu，可以是我接觸到linux經常使用命令、下載安裝、轉移新增刪除文件都很方便（面試官會問到哪些指令嗎？）

　　編輯器是brackets，做爲免費、開源且跨平臺的 HTML/CSS/JavaScript 前端 WEB 集成開發環境，簡約、優雅、快捷！

　　瀏覽器是chrome，內部提供的開發工具很豐富，例如單步調試、模擬不一樣像素設備、可以顯示較多css3屬性等。

*你最熟悉哪一套版本控制系統？

（這個問題，用過git，用過myeclipse裏的svn，用過tortoiseSVN將代碼上傳到sinaapp服務器，可是都不是很熟悉，只好翻了一下《Pro.Git-zh_CN》）

　　在Git 中的絕大多數操做都只須要訪問本地文件和資源，不用連網。對於任何一個文件，在Git 內都只有三種狀態：已提交（committed），已修改（modified）和已暫存（staged）。已提交表示該文件已經被安全地保存在本地數據庫中了；已修改表示修改了某個文件，但尚未提交保存；已暫存表示把已修改的文件放在下次提交時要保存的清單中。　

基本的Git 工做流程以下所示：
　　1. 在工做目錄中修改某些文件。
　　2. 對這些修改了的文件做快照，並保存到暫存區域。
　　3. 提交更新，將保存在暫存區域的文件快照轉儲到git 目錄中。

經常使用命令：

//用git 把Git 項目倉庫克隆到本地，以便往後隨時更新：
$ git clone git://git.kernel.org/pub/scm/git/git.git
//git add 命令告訴Git 開始對
這些文件進行跟蹤，而後提交：
$ git add filenme.html
//每次準備提交前，先用git status 看下，是否是都已暫存起來了，而後再運行提交命令
$ git commit -m 'initial project version'
// 把本地倉庫提交到遠程倉庫的master分支中
$ git push origin master

你能描述一下當你製做一個網頁的工做流程嗎？

　　1）根據需求，肯定主題。透徹深刻所作網站的核心功能和關鍵。

　　2）收集資料。從對比相同類型的網站（慣用而熟悉的樣式，用戶更樂意接受），參照別人可行的實現方法。
　　3）規劃網站。抽離出相似的模塊和可重用的部件。若是是響應式網站就須要設定斷點，根據不一樣寬度屏幕設定樣式。
　　4）設計數據庫。
　　5）搭建基本的框架。引入重置樣式表reset.css和字體樣式表font.css，風格統一的圖標還有後臺須要用到的包。
　　6）編碼和調試。注意統一命名和編碼規範。當多人開發時，還須要制定規範文檔。
　　7）上傳測試。利用FTP工具，把網站發佈到本身申請的主頁存放服務器上。網站上傳之後，你要在瀏覽器中打開本身的網站，逐頁逐個連接的進行測試，發現問題，及時修改，而後再上傳測試。 

　　8）推廣宣傳 。不斷宣傳，提升網站的訪問率和知名度。推廣的方法有不少，例如到搜索引擎上註冊、與別的網站交換連接、加入廣告鏈等。

　　9）維護更新 。網站要注意常常維護更新內容，保持內容的新鮮，不要一作好就放在那兒不變了，只有不斷地給它補充新的內容，纔可以吸引住瀏覽者

　　（具體還須要集合個人實際經驗：http://www.cnblogs.com/0603ljx/p/4284521.html）

你能描述一下漸進加強和優雅降級之間的不一樣嗎?

　　　　它們是看待同種事物的兩種觀點，它們關注在同一個網站同一功能在不一樣設備不一樣瀏覽器下的表現：

　　　　漸進加強，一開始值構建站點的最小特性，而後不斷針對個瀏覽器追加功能，性能越好的設備可以顯示更加出衆的效果。

　　　　優雅降級，一開始就構造站點的完整功能，而後針對瀏覽器測試和修復。

　　　　web標準對可訪問性作了以下定義：web內容對於殘障用戶或者普通的可閱讀和可理解性。不管用戶是否殘障，都得經過用戶代理（User Agent）來訪問Web內容。所以要提升可訪問性，首先得考慮各類用戶代理：桌面瀏覽器、語音瀏覽器、移動電話、車載我的電腦等等。還得考慮用戶訪問Web內容時的環境限制。好比：咱們真的要考慮瀏覽器禁用JavaScript/CSS的情形嗎？個人理解是，要考慮的其實不是禁用了JavaScript/CSS的瀏覽器，而是那些對JavaScript/CSS不支持或支持很差的用戶代理。好比語音閱讀器，手機瀏覽器等，JavaScript提供的是一層可訪問性，不能代替內容自己。

　　　　固然，從漸進加強的角度講，鼓勵使用高級特性，只是同時要作到優雅降級，讓低端用戶代理上，也能保留低保真的體驗。（除了用戶代理，還有什麼方法檢測客戶端設備？特性檢測，css3媒體查詢）

　　(講講我在平時項目中，在「漸進加強」和「優雅降級」的努力)

若是提到了特性檢測，能夠加分。

倘若你有5個不一樣的 CSS 文件, 加載進頁面的最好方式是?
文件拼合，減小http請求。

　　用一個大的CSS文件替代多個小體積的CSS文件這是一個很好的實踐，能夠得到更好的可維護性，可是在網站性能方面會產生必定的影響（這裏指的是隨着文件體積的增大，隨之消耗服務器的內存也會增長）。儘管你應該把CSS文件拆分紅小塊，可是當瀏覽器請求這些文件時，會產生同等數量的http請求。每一個http請求都會產生一次從你的瀏覽器到服務器端網絡往返過程，而且致使推遲到達服務器端和返回瀏覽器端的時間，咱們稱之爲延遲。所以，若是你有4個Javascript和3個css文件在頁面中被加載，你浪費掉了7次因網絡往返過程產生的時間。在美國，延遲平均是70毫秒，這樣你就浪費了7*70 = 490毫秒，大體延遲了半秒的時間。在美國以外的國家訪問你的頁面，平均延遲大約是200毫秒，這意味着你的頁面有1400毫秒的時間是在等待中度過。瀏覽器在你的CSS徹底加載完成以前是不能很好的渲染你的頁面的。所以越多的延遲讓你的頁面載入越慢。

請解釋一下什麼是「語義化的 HTML」

　　分離結構和表現的另外一個重要方式是使用語義化的標記來構造文檔內容。一個XHTML元素的存在乎味着被標記內容有相應的結構化意義，例如<p>是用來標記段落<h1>標記標題<ul><li>標記列表，不能過度使用<div>

　　語義化的標籤每每與默認樣式有所聯繫，像是Hx系列表示標題，會被賦予默認的塊級加粗居中樣式；<strong>,<em>用來區別於其餘文字，起到了強調的做用。用來明確告訴你它們的用途。

　　語義化標籤讓你們更直觀認識標籤和屬性的用途。語義化的網頁，對搜索引擎友好，更容易被搜索引擎抓取，有利於推廣。

*你如何對網站的文件和資源進行優化？

期待的解決方案包括：

文件合併（同上題「倘若你有5個不一樣的 CSS 文件, 加載進頁面的最好方式是？」）

　　　　　　　　減小調用其餘頁面、文件的數量。通常咱們爲了讓頁面生動活潑會大量使用background來加載背景圖，而每一個 background的圖像都會產生1次HTTP請求，要改善這個情況，能夠採用css的1個有用的background-position屬性來加載背景圖，咱們將須要頻繁加載的多個圖片合成爲1個單獨的圖片，須要加載時能夠採用：background:url(....) no-repeat x-offset y-offset;的形式加載便可將這部分圖片加載的HTTP請求縮減爲1個。

文件最小化/文件壓縮

　　　　　　　　即將須要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網絡上傳輸的數據量就會大幅減少。一般在服務器上的Apache、Nginx能夠直接開啓這個設置，也能夠從代碼角度直接設置傳輸文件頭，增長gzip的設置，也能夠從負載均衡設備直接設置。不過須要留意的是，這個設置會略微增長服務器的負擔。建議服務器性能不是很好的網站，要慎重考慮。

使用 CDN 託管

　　　　　　　　CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的情況，提升用戶訪問網站的響應速度。

緩存的使用

　　　　　　　　Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的<script src=」xxx.js?{VERHASH}」，{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。

css文件放置在head，js放置在文檔尾部
在服務器端配置control-cache last-modify-date
在服務器配置Entity-Tag if-none-match

聞東師兄說：

　　可再結合H5新特性裏的預加載，圖片優化方面，可對圖片進行壓縮，JPG的推薦jpegmin這個軟件，png的推薦

https://tinypng.com/，前面這兩個是壓縮後不會失真的，gif的推薦GIF Optimizer，但可能會有毛邊。

爲何利用多個域名來提供網站資源會更有效？

瀏覽器同一時間能夠從一個域名下載多少資源？

　　　　　　即瀏覽器併發請求數。同一時間針對同一域名下的請求有必定數量限制。超過限制數目的請求會被阻止。（借用百度上的一張圖片）

有什麼例外嗎？

加分項：指出在手機端可能有負面影響 (http://www.mobify.com/blog/domain-sharding-bad-news-mobile-performance/)
加分項： HTTP2 / SPDY

請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）

　　關於實際加載時間，能夠使用上題」你如何對網站的文件和資源進行優化？「方法。

　　關於感知時間，能夠使用上題「編寫代碼的哪些方面可以使你興奮或感興趣？」答案。

*若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？

建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規範
爲了保持一致性，接受項目原有的風格
直接使用 VIM 的 retab 命令

請寫一個簡單的幻燈效果頁面

若是不使用JS來完成，能夠加分。

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

Profiler, JSPerf, Dromaeo

若是今年你打算熟練掌握一項新技術，那會是什麼？

　　　　開發單頁webapp的技術。

　　　　SAP可以是頁面與頁面之間無縫鏈接，避免出現白頁，且帶有動態效果，提升用戶體驗。同時SAP，有javascript渲染頁面，而後在從服務器獲取小量的數據顯示，如此反覆，請求的數據無須要服務器處理，減小服務器負荷。

　　　　SAP對技術要求高。要考慮首屏加載事件過長；動畫效果要考慮低端手機；垃圾收集，須要本身釋放資源，避免頁面變卡。

*Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什麼區別？

請談一下你對網頁標準和標準制定機構重要性的理解。

　　　　關於W3C標準，要求：

　　　　1）書寫閉合，標籤小寫、不亂嵌套。有利於SEO

　　　　2）儘可能使用外鏈的css和js腳本，結構行爲表現分離。有利於頁面加載速度加快。

　　　　3）樣式和標籤分離，使用更合理的語義化標籤，內容被更多用戶設備訪問，維護成本也會下降。

　　　　指定標準，可以規避不一樣開發商開發出來不一樣的瀏覽器顯示不一致問題，同時爲

*什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之爲文檔樣式短暫失效(Flash of Unstyled Content),簡稱爲FOUC.緣由大體爲：
1，使用import方法導入樣式表。
2，將樣式表放在頁面底部
3，有幾個樣式表，放在html結構的不一樣位置。其實原理很清楚：當樣式表晚於 結構性html 加載，當加載到此樣式表時，頁面將中止以前的渲染。此樣式表被下載和解析後，將從新渲染頁面，也就出現了短暫 的 花屏現象。

解決方法：使用LINK標籤將樣式表放在文檔HEAD中更多

請儘量完整得描述下從輸入URL到整個網頁加載完畢及顯示在屏幕上的整個流程

　　1）用戶輸入網址

　　2）瀏覽器經過DNS獲取網站的IP地址

　　3）瀏覽器嘗試與服務器創建鏈接

　　4）服務器發送永久重定向

　　5）瀏覽器跟蹤從定向地址

　　7）服務器處理請求

　　8）服務器發送HTML響應

　　9）瀏覽器開始顯示HTML

　　10）瀏覽器發送獲取嵌套在html中的元素

　　　　關於頁面渲染過程：

　　　　1）解析HTML代碼，生成一棵DOM樹

　　　　2）解析CSS文件

　　　　3）生成渲染樹（受樣式影響，包含不可見元素）

　　　　4）渲染樹中的節點

HTML相關問題：

doctype（文檔類型）的做用是什麼？

　　　　位於html標籤最前面，告訴瀏覽器以那種html和xhtml規範。分爲標準模式和怪異模式、基於框架的HTML模式。假如瀏覽器不以doctype標準模式編寫DTD，頁面除了沒法經過代碼檢驗以外，還沒法在瀏覽器中正確顯示。

　　a.若是須要乾淨的標記，免於表現層的混亂，用XHTML Strict DTD類型。

　　b.Transitional DTD 可包含 W3C 所指望移入樣式表的呈現屬性和元素。若是用戶使用了不支持層疊樣式表（CSS）的瀏覽器以致於你不得不使用 HTML 的呈現特性時，用Transitional DTD 類型。

　　c.Frameset DTD 被用於帶有框架的文檔。除 frameset 元素取代了 body 元素以外，Frameset DTD 等同於 Transitional DTD

瀏覽器標準模式和怪異模式之間的區別是什麼？

　　　　當瀏覽器廠商開始建立與標準兼容的瀏覽器時，他們但願確保向後兼容性。爲了實現這一目的，他們建立了兩種呈現模式，標準和混雜模式。在標準模式中，瀏覽器會根據規範呈現頁面；在混雜模式中。頁面會以一種相對寬鬆的向後兼容方式顯示。混雜模式經常使用於模擬老式瀏覽器的行爲，以防止老站點沒法工做。

　　　　他們最大的不一樣是對盒模型的解析。

　　如：在strict mode中：width是內容寬度，也就是說,元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;

　　　　在quirks mode中：width則是元素的實際寬度，內容寬度 = width - (margin-left + margin-right + padding-left + padding-right + border-left-width + 　border-right-width)

　　　　使用 document.compatMode來判斷瀏覽器的解析方式。

使用 XHTML 的侷限有哪些？

xhtml要求嚴格：放棄了一些語義很差的標籤，必須有head、body，每一個dom必需要閉合。一些老的瀏覽器並不兼容。

若是頁面使用 'application/xhtml+xml' 會有什麼問題嗎？

　　　　　　爲contentType屬性值，IE不支持application/xhtml+xml類型，支持text/html

若是網頁內容須要支持多語言，你會怎麼作？

　　　　使用統一的UTF-8編碼

在設計和開發多語言網站時，有哪些問題你必需要考慮？

　　　　　1）製圖時，應該講圖形的圖像層與文本層分離，這樣在從新繪製改圖形時只需對文本進行翻譯。

　　　　　2）設置控件屬性應考慮到各類語言版本的文本顯示，儘量爲翻譯預留足夠的空間。同時也應該保持不一樣語言界面的統一性，避免過多的差別。

　　　　　3）編碼注意代碼複用，將多個模塊的共用信息存放在共通的文件中便於全局管理。

　　　　頁面請求的過程可描述以下:
　　　　　　1）用戶在終端選擇本身所偏好的語言,並經過瀏覽器向服務器發送頁面請求。
　　　　　　2）模板界面接收到語言選項後,從資源文件中讀取相應區域的資源。
　　　　　　3）在響應用戶的頁面請求時,系統將根據檢索到的語言選項,動態的加載相關區域的JS文件和CSS文件,爲不一樣區域初始化不一樣的樣式。
　　　　　　4）數據庫接口接收到語言選項後,將其做爲一個SQL參數傳入數據庫,檢索相應區域的數據。
　　　　　　5）模板界面將接收到的各類信息,組織成Html代碼,再發送給瀏覽器,顯示給終端用戶。
　　　　　　　　該架構的核心是模板界面,它主要負責將接收到的各種信息組織成Html代碼。

data-屬性的做用是什麼？

　　　　data-是HTML5爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取。

若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？

　　　　1）Web Storage API
　　　　2）基於位置服務LBS
　　　　3）無插件播放音頻視頻
　　　　4）調用相機和GPU圖像處理單元等硬件設備
　　　　5）拖拽和Form API

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

　　共同點：都是保存在瀏覽器端，且同源的。
　　區別：
　　1）cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

　　2）cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。
　　3）sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
　　4）做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。


　　sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。
　　sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據。
　　　　其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的。

Web Storage帶來的好處：
　　1）減小網絡流量：一旦數據保存在本地後，就能夠避免再向服務器請求數據，所以減小沒必要要的數據請求，減小數據在瀏覽器和服務器間沒必要要地來回傳遞。
　　2）快速顯示數據：性能好，從本地讀數據比經過網絡從服務器得到數據快得多，本地數據能夠即時得到。再加上網頁自己也能夠有緩存，所以整個頁面和數據都在本地的話，能夠當即顯示。
　　3）臨時存儲：不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage很是方便。

瀏覽器本地存儲與服務器端存儲之間的區別其實數據既能夠在瀏覽器本地存儲，也能夠在服務器端存儲。
瀏覽器端能夠保存一些數據，須要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。
服務器端也能夠保存全部用戶的全部數據，但須要的時候瀏覽器要向服務器請求數據。
1.服務器端能夠保存用戶的持久數據，如數據庫和雲存儲將用戶的大量數據保存在服務器端。
2.服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制，如jsp的 session 對象，數據保存在服務器上。實現上，服務器和瀏覽器之間僅需傳遞session id便可，服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。
服務器端保存全部的用戶的數據，因此服務器端的開銷較大，而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。瀏覽器端通常只用來存儲小數據，而服務器能夠存儲大數據或小數據。服務器存儲數據安全一些，瀏覽器只適合存儲通常數據。

請描述一下 GET 和 POST 的區別?

　　get是從服務器上獲取數據，post是向服務器傳送數據。

　　get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程

　　get形式的url對搜索引擎更加友好，能夠提升搜索引擎排名。Post使用的url有時候會阻止爬蟲和搜索引擎的訪問。其餘網站和用戶能夠連接到get形式的url，不管用戶的訪問，仍是搜索引擎的收錄而相應提升了頁面排名，可以直接或間接提升網站瀏覽。同時，get形式的url這種表示法是能夠緩存的，顯著提高了客戶端和服務端的性能。

　　而不安全操做，如肯定訂購、下訂單、達成協議和刪除頁面等，應該經過post執行，避免沒有顯式用戶請求和同一的狀況下發生意外的操做。例如搜索引擎刪除整個頁面，只由於抓取了一個連接。不少不但願用戶瀏覽器遵循頁面連接的各類完整，這些狀況下，應該要求用戶登陸而且足夠的權限才能執行某些危險操做。

　　若符合下列任一狀況，則用POST方法：

　　　　* 請求的結果有持續性的反作用，例如，數據庫內添加新的數據行。

　　　　* 若使用GET方法，則表單上收集的數據可能讓URL過長。

　　　　* 要傳送的數據不是採用7位的ASCII編碼。

　　若符合下列任一狀況，則用GET方法：

　　　　* 請求是爲了查找資源，HTML表單數據僅用來幫助搜索。

　　　　* 請求結果無持續性的反作用。

　　　　* 收集的數據及HTML表單內的輸入字段名稱的總長不超過1024個字符。

　　　　（目測還會問到「同步和異步的區別?」）

　　　　　　同步：腳本會停留並等待服務器發送回覆而後再繼續。提交請求->等待服務器處理->處理完畢返回，這個期間客戶端瀏覽器不能幹任何事。

　　　　　　異步：腳本容許頁面繼續其進程並處理可能的回覆。請求經過事件觸發->服務器處理（這是瀏覽器仍然能夠做其餘事情）->處理完畢

　　　　　　　　若要在使用ajax請求後處理髮送請求返回的結果，最好使用同步請求。

CSS 相關問題：

CSS 中類(classes)和 ID 的區別。

　　在樣式表定義一個樣式的時候，能夠定義id也能夠定義class。

　　　　一、在CSS文件裏書寫時，ID加前綴"#"；CLASS用"."

　　　　二、id一個頁面只能夠使用一次；class能夠屢次引用。

　　　　三、ID是一個標籤，用於區分不一樣的結構和內容，就象名字，若是一個屋子有2我的同名，就會出現混淆；class是一個樣式，能夠套在任何結構和內容上，就象一件衣服；

　　　　四、從概念上說就是不同的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

　　　　目前的瀏覽器還都容許用多個相同ID，通常狀況下也能正常顯示，不過當你須要用JavaScript經過id來控制div時就會出現錯誤。

描述下「reset」 CSS 文件的做用和使用它的好處。

　　　　reset.css可以重置瀏覽器的默認屬性。不一樣的瀏覽器具備不一樣的樣式，重置可以使其統一。好比說ie瀏覽器和FF瀏覽器下button顯示不一樣，經過reset可以統同樣式，顯示相同的想過。可是不少reset是不必的，多寫了會增長瀏覽器在渲染頁面的負擔。

好比說，

　　1）咱們不該該對行內元素設置無效的屬性，對span設置width和height，margin都不會生效的。

　　2）對於absolute和fixed定位的固定尺寸（設置了width和height屬性），若是設置了top和left屬性，那麼bottom和right，margin和float就沒有做用。

　　3）後面設置的屬性將會覆蓋前面重複設置的屬性。

期待可以指出它的負面影響，或者提到它的一個更好的替換者"normalize"

　　　　normalize.css是一個能夠定製的css文件，它讓不一樣的瀏覽器在渲染元素時形式更統一。

解釋下浮動和它的工做原理。

　　　　問題成因：在一個容器中，有兩個浮動的子元素，會形成顯示結果意想不到的問題。在CSS規範中，浮動定位不屬於正常的頁面流，而是獨立定位的。

　　　　關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框能夠左右移動，直到它的外邊緣遇到包含框或者另外一個浮動框的邊緣，因此才說浮動定位不屬於正常的頁面流。文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。因此，只含有浮動元素的父容器在顯示時不須要考慮子元素的位置，就形成顯示父容器像空容器同樣。

　　　　解決浮動：

　　　　1）添加額外標籤
　　　　　　在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>。

　　　　　　優勢：通俗易懂，容易掌握
　　　　　　缺點：能夠想象經過此方法，會添加多少無心義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢。
　　　　2）使用 br標籤和其自身的 html屬性 <br clear="all" />

　　　　　　優勢：比空標籤方式語義稍強，代碼量較少
　　　　　　缺點：一樣有違結構與表現的分離，不推薦使用
　　　　3)父元素設置 overflow：hidden
　　　　　　經過設置父元素overflow值設置爲hidden；在IE6中還須要觸發 hasLayout ，例如 zoom：1。<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">

　　　　　　優勢：不存在結構和語義化問題，代碼量極少
　　　　　　缺點：內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素；overflow:hidden會致使中鍵失效。
　　　　4)父元素設置 overflow：auto 屬性。一樣IE6須要觸發hasLayout，演示和3差很少
　　　　　　優勢：不存在結構和語義化問題，代碼量極少
　　　　　　缺點：多個嵌套後，firefox某些狀況會形成內容全選；IE中 mouseover 形成寬度改變時會出現最外層模塊有滾動條等，firefox早期版本會無端產生focus等。
　　　　5）使用:after 僞元素
　　　　須要注意的是 :after是僞元素（Pseudo-Element），不是僞類（某些CSS手冊裏面稱之爲「僞對象」），不少清除浮動大全之類的文章都稱之爲僞類，不過csser要嚴謹一點，這是一種態度。因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

　　　　.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
　　　　.clearfix { *zoom:1; }

　　　　　　優勢：結構和語義化徹底正確,代碼量居中
　　　　　　缺點：複用方式不當會形成代碼量增長

描述z-index和疊加上下文是如何造成的。

　　　z-index就是控制元素在頁面的中的疊加順序，z-index值高的元素顯示在z-index值低的前面。z-index的使用條件：只對有 position 屬性的且值不爲static的元素纔有效。疊加上下文和「堆棧上下文」有關，一組具備共同雙親的元素，按照堆棧順序一塊兒向前或向後移動構成了所謂的堆棧上下文。

一個元素的堆疊順序，不只僅取決於它自身的z-index，更要看它所處在的堆棧上下文，若是所處的上下文的層級很低，即便他自己的z-index設置的很高，也沒法實現你的要求。

　z-index解析規則都是基於標準的符合w3c規範的瀏覽器，但IE系列的瀏覽器老是讓你要多費一番功夫。

　　IE中z-index跟標準瀏覽器中的解析有一個小小的區別，那就是上面說的產生堆棧上下文中的三個條件中，對第二個條件的支持的區別，在標準瀏覽器中元素必須是有z-index值的同時要有position屬性，且值不爲static，知足這兩個條件，纔會產生一個新的堆棧上下文，但低版本的IE中就無論這麼多了，只要你設置了position值不爲static，他就會生成一個新的堆棧上下文。

列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景。

　　　　答案爲可參考上題「解釋下浮動和它的工做原理」

解釋下 CSS sprites，以及你要如何在頁面或網站中實現它。

　　　　CSS sprites其實就經過將多個圖片融合到一副圖裏面，而後經過CSS的技術佈局到頁面上。這樣作的好處是，減小圖片數量，將會減小http的請求，提高網站性能。

　　　　1）在photoshop新建背景透明的畫板，將小圖片依次擺放在畫板中，調整小圖片爲適當大小。

　　　　2）經過標尺記錄圖片的橫座標縱座標。

　　　　3）編寫css代碼background:url(....) no-repeat x-offset y-offset;同時設定元素固定高度和寬度，overflow:hidden

你最喜歡的圖片替換方法是什麼，你如何選擇使用。

　　　　不管是對瀏覽者仍是對搜索引擎，文字都是最佳的頁面內容展現方式，可是，因爲字體等緣由的限制，純文字的展現漸漸沒法知足愛漂亮的設計師的要求。

因而，出現了經過CSS來實現用圖片替換文字的方法，這種方式既能實現頁面上各類豐富的效果，又能知足搜索引擎優化的須要。

Fahrner Image Replacement (FIR)
Phark 的方法
Gilder/Levin 的方法 (推薦)

Fahrner Image Replacement (FIR)

這是最先出現的圖文替換技術，是由 Todd Fahrner 提出的，很是容易理解：

<h2><span>Hello World</span></h2>

h2 {
     background:url(hello_world.gif) no-repeat; 
    width: 150px; 
    height: 35px; 
} 
span {
    display: none; 
}

代碼很是明白：先將圖片應用在 H2 的背景中，而後將 SPAN 的標籤隱藏。可是這種方式有個問題，就是當圖片沒法顯示時，將致使這個區域沒有任何內容。同時，使用 display:none 的方式隱藏的內容，將被許多主流屏幕閱讀器忽略，從而形成可用性問題，所以，應該儘可能避免使用。

Phark 的方法

 <h2> Hello World </h2>

 h2 {
    text-indent: -5000px;
    background:url(hello_world.gif) no-repeat;
    width: 150px;height:35px; 
}

代碼也很是簡單，經過文本縮進，將文字隱藏，可是，當圖片沒法顯示時，依然存在 FIR 的問題。

Gilder/Levin 的方法

  <h2><span></span>Hello World </h2>

 h2 {
    width: 150px;height: 35px;
    position: relative; 
} 
h2 span {
    background: url(hello_world.gif) no-repeat; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

首先，將 H2 的 position 設爲 relative ，這樣將使 H2 裏面的元素定位以 H2 爲參照，而後將 SPAN 元素絕對定位，撐滿整個 H2 區域，同時將背景圖應用在 SPAN 標籤裏面；這種方法的原理是將 SPAN 標籤覆蓋在文字內容上面，一旦 SPAN 裏面的背景圖沒法顯示，將顯示下層的文字內容，不影響正常使用。可是，此方法也有一個缺陷，就是背景圖不能透明，不然將透出下面的文字。

討論CSS hacks，條件引用或者其餘。

　　hacks　　

　　_width針對於ie6。*width,+width針對於ie6,7。

　　color: red\9;/*IE8以及如下版本瀏覽器*/（可是測試能夠兼容到ie10。

　　*+html與*html是IE特有的標籤, firefox暫不支持.而*+html又爲IE7特有標籤（可是測試*html兼容ie6-10。*+兼容ie7-10）。

　　!important 在IE中會被忽視，ie6,7,8不識別，ie9+（包括ie9）是識別的。

　　條件引用

<!--[if !IE]><!--> 除IE外均可識別 <!--<![endif]-->
<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if IE 6]> 僅IE6可識別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6如下版本可識別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
<!--[if IE 7]> 僅IE7可識別 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7如下版本可識別 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->
<!--[if IE 8]> 僅IE8可識別 <![endif]-->
<!--[if IE 9]> 僅IE9可識別 <![endif]-->

如何爲有功能限制的瀏覽器提供網頁？

　　　　1）對於那些能夠手動開啓的功能，能夠在頁面上增設「用戶使用指導」或「幫助手冊」，提示用戶如何開啓相關的功能。（若是你不介意，還能夠徹底禁掉頁面，強制用戶使用固定設備，升級版本；哈哈，當年我作的BMS就是這樣作）

　　　　　　例如，針對使用IE瀏覽器自帶的功能能夠限制對網頁的瀏覽，好比activeX或者腳本，咱們檢測到它不可用時，提示用戶啓用的操做方式。

　　　　2）儘可能避免當js或者css3失效時，頁面不可用的動畫效果。

　　　　　　例如，http://www.rippletec.net/網站爲了營造一種當頁面加載完畢，不一樣模塊滾動到固定位置的絢麗動畫效果。應該避免相似的效果，一方面產生繁瑣的重繪過程，會消耗瀏覽器內存，對性能通常的設備可能由於壓力過大，卡機或者沒法渲染；另一方面是網站當網站的js不可用時，模塊滾動到固定位置的事件沒有被觸發，用戶看到的將會是動畫產生以前，最原始的頁面狀態，沒法經行下一步操做。

　　　　（首次接觸「優雅降級」這個詞彙是在《jQuery基礎教程（第4版）》，不過那時候已是一年多之前，如今已經記不清當時書上舉得例子了，記性差~真心抱歉）

3）應該爲綁定異步的元素，設置herf屬性。

　　　　例如，用戶要執行查詢某書本詳細信息操做，點擊「查詢」按鈕，經過js觸發查詢該條目的事件，而後採用jQuery異步執行操做，在頁面固定位置加載相關書本的詳細內容。$(".delete").click(function(){$.ajax(//..)})，可是一旦js不可用，或者jQuery無發加載的時候，用戶將沒法順利執行操做。所以，能夠爲該操做設置herf屬性，當$.ajax()可用時阻止直接跳轉，而使用異步；當$.ajax()不可用時，直接跳轉到詳細信息的頁面。

　　　4）避免依賴腳本驗證表單。服務器的表單驗證不可避免。

　　　5）部分瀏覽器不支持html5新標籤，所以，能夠用js建立相關標籤，而後給它們的css賦予相關屬性。

　　　6）由於iPhone並無鼠標指針，因此沒有hover事件。那麼CSS :hover僞類就沒用了。可是iPhone有Touch事件，onTouchStart 相似 onMouseOver，onTouchEnd 相似 onMouseOut。因此咱們能夠用它來模擬hover。使用Javascript：

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
　　myLinks[i].addEventListener(’touchstart’, function()    {
　　
this.className = 「hover」;}, false);
　　myLinks[i].addEventListener(’touchend’, function(){this.className = 「」;}, false);
}

而後用CSS增長hover效果：

a:hover, a.hover { /* 你的hover效果 */ }

你會使用哪些技術和處理方法？

有哪些的隱藏內容的方法（若是同時還要保證屏幕閱讀器可用呢？）

　　　　須要隱藏內容的幾種可能性：

　　　　1）對文本的隱藏

　　　　2）隱藏超連接（另類黑鏈）

　　　　3）對統計代碼隱藏

　　　　4）隱藏超出圖片

　　　　5）css隱藏滾動條

　　　　6）css隱藏div層

　　具體實現：

　　　　一、css隱藏DIV及內容，徹底隱藏內容與佈局。display:none或者visibility:hidden

　　　　　　（面試官也許會問到：關於display:none和visible:hidden區別）

　　　　display:none和visible:hidden都能把網頁上某個元素隱藏起來，但二者有區別:

　　　　display:none ---不爲被隱藏的對象保留其物理空間，即該對象在頁面上完全消失，通俗來講就是看不見也摸不到。

　　　　visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所佔的空間沒有改變，通俗來講就是看不見但摸獲得。

　　　二、經過對象盒子設置縮進樣式（text-indent:-9999px）方法能夠隱藏超連接文本內容
　　　　　　一樣道理，能夠用來隱藏圖片上方文字。此類問題咱們常見於LOGO處使用，咱們想讓圖片做爲背景，而圖片上方放A連接文字內容，但html錨文本功能仍然正常也能鼠標點擊使用。圖片做爲背景而html代碼內看不到圖片，但文字也存在，倒是文字隱藏圖片顯示出，鼠標也能點擊指向。

　　　　三、overflow: hidden 隱藏溢出DIV內容或圖片

　　　　四、css隱藏滾動條

使用overflow-y:hidden;和overflow-x:hidden來隱藏或顯示對應橫或豎方向的滾動條。

你用過柵格系統嗎？若是使用過，你最喜歡哪一種？

　　　　「網格系統」，運用固定的格子設計版面佈局，其風格工整簡潔。

　　　　「使用柵格系統的網頁設計，很是的有條理性；看上去也很舒服。最重要的是，它給整個網站的頁面結構定義了一個標準。對於視覺設計師來講，他們不用再爲設計一個網站每一個頁面都要想一個寬度或高度而煩惱了。對於前端開發工程師來講，頁面的佈局設計將徹底是規範的和可重用的，這將大大節約了開發成本。對於內容編輯或廣告銷售來講，全部的廣告都是規則的，通用的，他們不再用作出一套N張不一樣尺寸的廣告圖了」

　　　　Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨着屏幕設備或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義classe，還有強大的mixin用於生成更具語義的佈局。

你用過媒體查詢，或針對移動端的佈局/CSS 嗎？

　　　　針對http://topview123.sinaapp.com/細說

　　　　設備寬度(device-width)未必是佈局寬度(width)，爲了讓非適應性佈局與手機相適應，咱們跟關心視圖寬度，所以須要一種方式來設定寬度，這樣能夠使用媒體查詢檢測。

　　　　讓視圖的寬度和設備寬度一致

<meta element = "viewport"
           content = "width=device
                            initial-scale = 1" >

　　　　每種佈局，都應該根據目標設備指定固定寬度設計

@media screen and (max-width:320px){}

　　　　爲移動設備調整網頁圖像。在最基本的頁面，一個移動優化的網站就是其佈局、內容、互動都通過調整，以適應移動環境。最多見的作法是使用css媒體查詢的功能爲不一樣大小的屏幕提供不一樣的風格；爲較小的屏幕優化佈局，能夠經過針對移動設備的模塊服務。

不一樣設備的分離設計->根據監視屏幕大小進行設計->（媒體查詢，靈活排版，圖像結合）

如何優化網頁的打印樣式？

　　http://www.jb51.net/web/70358.html

在書寫高效 CSS 時會有哪些問題須要考慮？

　　　 1）reset。參照上題「描述下「reset」 CSS 文件的做用和使用它的好處」的答案。

　　　　2）規範命名。尤爲對於沒有語義化的html標籤，例如div，所賦予的class值要特別注意。

　　　　2）抽取可重用的部件，注意層疊樣式表的「優先級」。

使用 CSS 預處理器的優缺點有哪些？(SASS，Compass，Stylus，LESS)

　　　　（這裏我會實話實說）過去一直沒有機會接觸「預處理器」，缺的不是學習的熱情和動力，而是一種會使用到這門高深技術的需求，但願往後參與的項目將會用到這門技術，可以將學習揉入實際開發中。關於CSS 預處理器，我知道是一種語言用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。

描述下你曾經使用過的 CSS 預處理的優缺點。

若是設計中使用了非標準的字體，你該如何去實現？

　　　　1）圖片替代

　　　　 2）好是跟產品溝通，儘可能使用默認就有的字體。雖然咱們能夠用webfonts，但它在頁面加載的時候會將整個字體包都下載下來，這對於手機端網頁來講無疑是致命的。若是產品必定要用非標準字體，可用這個軟件FontCreator，能夠從一個字體包中將你這個頁面須要的那幾個字提取出來，打成一個新的字體包，這樣會節省不少流量

Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)

解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？

　　　　瀏覽器會根據css rules 與dom tree 生成render tree。瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。

舉個例子，有選擇器：

body.ready #wrapper > .lol233

　　　　先把全部 class 中有 lol233 的元素拿出來組成一個集合，而後上一層，對每個集合中的元素，若是元素的 parent id 不爲 #wrapper 則把元素從集合中刪去。再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 爲 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。

　　至此這個選擇器匹配結束，全部還在集合中的元素知足。

　　大致就是這樣，不過瀏覽器還會有一些奇怪的優化。爲何從後往前匹配由於效率和文檔流的解析方向。

　　　　1）效率，找元素的父親和以前的兄弟比遍歷全部兒子快並且方便。

　　　　2）關於文檔流的解析方向，是由於如今的 CSS，一個元素只要肯定了這個元素在文檔流以前出現過的全部元素，就能肯定他的匹配狀況。應用在即便 html 沒有載入完成，瀏覽器也能根據已經載入的這一部分信息徹底肯定出現過的元素的屬性。

　　爲何是用集合主要也仍是效率。基於 CSS Rule 數量遠遠小於元素數量的假設和索引的運用，遍歷每一條 CSS Rule 經過集合篩選，比遍歷每個元素再遍歷每一條 Rule 匹配要快得多。

解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。

　　　　網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具有這些屬性。

　　　　每一個盒子都有：邊界、邊框、填充、內容四個屬性；

　　　　每一個屬性都包括四個部分：上、右、下、左；這四部分可同時設置，也可分別設置；

請解釋一下 * { box-sizing: border-box; } 的做用, 而且說明使用它有什麼好處？

　　　　說到 IE 的 bug，在 IE6之前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不一樣，將 border 與 padding 都包含在 width 以內。而另一些瀏覽器則與它相反，是不包括border和padding的。對於IE瀏覽器，當咱們設置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋聽從咱們以前認識到的 W3C 標準，當它定義width和height時，它的寬度不包括border和padding；對於非IE瀏覽器，當咱們設置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6以前的版本相同，當它定義width和height時，border和padding則是被包含在寬高以內的。內容的寬和高能夠經過定義的「width」和「height」減去相應方向的「padding」和「border」的寬度獲得。內容的寬和高必須保證不能爲負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小爲0。

　　使用 * { box-sizing: border-box; }可以統一IE和非IE瀏覽器之間的差別。

請羅列出你所知道的 display 屬性的所有值

　　display 屬性規定元素應該生成的框的類型。

請解釋一下 inline 和 inline-block，block 的區別？

　　都是display 屬性規定元素應該生成的框的類型。可是block表明塊級元素，元素先後都有換行符；inline是默認的樣式，表示該元素被顯示爲內聯元素，元素先後沒有換行符號。也就是說，block元素一般被現實爲獨立的一塊，會單獨換一行；inline元素則先後不會產生換行，一系列inline元素都在一行內顯示，直到該行排滿。而inline-block表明行內塊元素（css2.0新增）。

display:block

　　1）block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度。

　　2）block元素能夠設置width,height屬性。塊級元素即便設置了寬度,仍然是獨佔一行。

　　3）block元素能夠設置margin和padding屬性。

display:inline

　　1）inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。

　　2）inline元素設置width,height屬性無效。

　　3）inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

display:inline-block

　　簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

請解釋一下 relative、fixed、absolute 和 static 元素的區別

在用CSS+DIV進行佈局的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以至常常會出現讓人很鬱悶的結果。今天研究了一下，總算有所瞭解。在此總結一下：

先看下各個屬性值的定義：

一、static：默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

二、relative：生成相對定位的元素，經過top,bottom,left,right的設置相對於其正常位置進行定位。可經過z-index進行層次分級。

三、absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

四、fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可經過z-index進行層次分級。

static與fixed的定位方式較好理解，在此不作分析。下面對應用的較多的relative和absolute進行分析：

一、relative。定位爲relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。

黃色背景的層定位爲relative，紅色邊框區域爲其在正常流中的位置。在經過top、left對其定位後，從灰色背景層的位置能夠看出其正常位置依然存在。

二、absolute。定位爲absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不在存在。在將黃色背景層定位爲absolute後，灰色背景層自動補上。

三、relative與absolute的主要區別：

首先，是上面已經提到過的在正常流中的位置存在與否。

其次，relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。紅色背景層爲relative定位，其直接父元素綠色背景層爲默認的static定位。紅色背景層的位置爲相對綠色背景層top、left個20元素。而若是紅色背景層定位爲absolute。紅色背景層依然定義top:20px；left:20px；但其相對的元素變爲定位方式爲absolute或relative的黃色背景層。所以，對於absolute定位的層老是相對於其最近的定義爲absolute或 relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位。

除top、left、right、bottom定位外，margin屬性值的定義也符合上述規則。

static與定位用的比較少，也比較簡單，在此不作分析。
下面對應用的較多的relative和absolute與fixed進行分析：
relative定位的層老是相對於其最近的父元素，不管其父元素是何種定位方式。
absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。若是其父層中都未定義absolute或relative，則其將相對body進行定位，
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。