前段時間專心整理一下關於前端的面試問題。感謝耐心盡責的楷豪和聞東師兄最近給我們的指導和建議。大家可以通過這些問題，大家可以順便看以下自己的水平。
http://www.linuxidc.com/Linux/2015-03/115180.htm
我也利用課余時間（三天沒安排課程的下午晚上）嘗試寫下自己的答案，水平有限，望體諒。
暫時只提供上半部分，下半部關於js和jQuery的還有部分答案未完全確認，稍後再發布。
這段事件一直在整理有關前端的面試題目，整理這也題目，不只是為了能夠學習應付即將到來的面試，更是為了補補基礎知識。日常項目開發進度太快了，很多屬性或者方法用了就忘，這樣會造成另外一個隱患，因為基本知識不夠扎實，常用的方法用得不夠熟練，就很難高效率地開發項目。
有了扎實的基礎知識，才能其期盼自己走得更遠。
1）知道W3C的標准，於是在編寫html時候會規避“標簽不閉合，亂嵌套，大小寫混雜”可能造成不同浏覽器展示不一致的隱患。
2）知道了CSS的“層疊”規則，整理並且對比了清楚浮動和實現居中的方法，還發現了一些不常用屬性。於是，有利於日後高效地編寫樣式表。
等等，等等
編寫代碼最讓我興奮的是學習新的技術，嘗試新的視覺效果的過程。
例如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
（如果問我這個問題，我會很興奮的，因為可以說半個小時。）
（有兩套開發環境，一套是用來平時團隊項目的開發，我的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）維護更新 。網站要注意經常維護更新內容，保持內容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內容，才能夠吸引住浏覽者
它們是看待同種事物的兩種觀點，它們關注在同一個網站同一功能在不同設備不同浏覽器下的表現：
漸進增強，一開始值構建站點的最小特性，然後不斷針對個浏覽器追加功能，性能越好的設備能夠顯示更加出眾的效果。
優雅降級，一開始就構造站點的完整功能，然後針對浏覽器測試和修復。
web標准對可訪問性做了如下定義：web內容對於殘障用戶或者普通的可閱讀和可理解性。無論用戶是否殘障，都得通過用戶代理（User Agent）來訪問Web內容。因此要提高可訪問性，首先得考慮各種用戶代理 ：桌面浏覽器、語音浏覽器、移動電話、車載個人電腦等等。還得考慮用戶訪問Web內容時的環境限制 。比如：我們真的要考慮浏覽器禁用JavaScript/CSS的情形嗎？我的理解是，要考慮的其實不是禁用了JavaScript/CSS的浏覽器，而是那些對JavaScript/CSS不支持或支持不好的用戶代理。比如語音閱讀器，手機浏覽器等，JavaScript提供的是一層可訪問性，不能代替內容本身。
當然，從漸進增強的角度講，鼓勵使用高級特性，只是同時要做到優雅降級，讓低端用戶代理上，也能保留低保真的體驗。（除了用戶代理，還有什麼方法檢測客戶端設備？特性檢測，css3媒體查詢）
(講講我在平時項目中，在“漸進增強”和“優雅降級”的努力)
用一個大的CSS文件替代多個小體積的CSS文件這是一個很好的實踐，可以獲得更好的可維護性，但是在網站性能方面會產生一定的影響（這裡指的是隨著文件體積的增大，隨之消耗服務器的內存也會增加）。盡管你應該把CSS文件拆分成小塊，但是當浏覽器請求這些文件時，會產生同等數量的http請求。每個http請求都會產生一次從你的浏覽器到服務器端網絡往返過程，並且導致推遲到達服務器端和返回浏覽器端的時間，我們稱之為延遲。因此，如果你有4個Javascript和3個css文件在頁面中被加載，你浪費掉了7次因網絡往返過程產生的時間。在美國，延遲平均是70毫秒，這樣你就浪費了7*70 = 490毫秒，大致延遲了半秒的時間。在美國之外的國家訪問你的頁面，平均延遲大約是200毫秒，這意味著你的頁面有1400毫秒的時間是在等待中度過。浏覽器在你的CSS完全加載完成之前是不能很好的渲染你的頁面的。因此越多的延遲讓你的頁面載入越慢。
分離結構和表現的另一個重要方式是使用語義化的標記來構造文檔內容。一個XHTML元素的存在意味著被標記內容有相應的結構化意義，例如<p>是用來標記段落<h1>標記標題<ul><li>標記列表，不能過分使用<div>
語義化的標簽往往與默認樣式有所聯系，像是Hx系列 表示標題，會被賦予默認的塊級加粗居中樣式；<strong>,<em>用來區別於其他文字，起到了強調的作用。用來明確告訴你它們的用途。
語義化標簽讓大家更直觀認識標簽和屬性的用途。語義化的網頁，對搜索引擎友好，更容易被搜索引擎抓取，有利於推廣。
減少調用其他頁面、文件的數量。一般我們為了讓頁面生動活潑會大量使用background來加載背景圖，而每個 background的圖像都會產生1次HTTP請求，要改善這個狀況，可以采用css的1個有用的background-position屬 性來加載背景圖，我們將需要頻繁加載的多個圖片合成為1個單獨的圖片，需要加載時可以采用：background:url(....) no-repeat x-offset y-offset;的形式加載即可將這部分圖片加載的HTTP請求縮減為1個。
即將需要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網絡上傳輸的 數據量就會大幅減小。通常在服務器上的Apache、Nginx可以直接開啟這個設置，也可以從代碼角度直接設置傳輸文件頭，增加gzip的設置，也可以 從 負載均衡設備直接設置。不過需要留意的是，這個設置會略微增加服務器的負擔。建議服務器性能不是很好的網站，要慎重考慮。
CDN的全稱是Content Delivery Network，即內容分發網絡。其基本思路是盡可能避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。其目的是使用戶可就近取得所需內容，解決 Internet網絡擁擠的狀況，提高用戶訪問網站的響應速度。
Ajax調用都采用緩存調用方式，一般采用附加特征參數方式實現，注意其中的<script src=”xxx.js?{VERHASH}”，{VERHASH}就是特征參數，這個參數不變化就使用緩存文件，如果發生變化則重新下載新文件或更新信息。
聞東師兄說：
可再結合H5新特性裡的預加載，圖片優化方面，可對圖片進行壓縮，JPG的推薦jpegmin這個軟件，png的推薦https://tinypng.com/，前面這兩個是壓縮後不會失真的，gif的推薦GIF Optimizer，但可能會有毛邊。 即浏覽器並發請求數。同一時間針對同一域名下的請求有一定數量限制。超過限制數目的請求會被阻止。（借用百度上的一張圖片）
關於實際加載時間，可以使用上題”你如何對網站的文件和資源進行優化？“方法。
關於感知時間，可以使用上題“編寫代碼的哪些方面能夠使你興奮或感興趣？”答案。
開發單頁webapp的技術。
SAP能夠是頁面與頁面之間無縫連接，避免出現白頁，且帶有動態效果，提高用戶體驗。同時SAP，有javascript渲染頁面，然後在從服務器獲取小量的數據顯示，如此反復，請求的數據無需要服務器處理，減少服務器負荷。
SAP對技術要求高。要考慮首屏加載事件過長；動畫效果要考慮低端手機；垃圾收集，需要自己釋放資源，避免頁面變卡。
關於W3C標准，要求：
1）書寫閉合，標簽小寫、不亂嵌套。有利於SEO
2）盡量使用外鏈的css和js腳本，結構行為表現分離。有利於頁面加載速度加快。
3）樣式和標簽分離，使用更合理的語義化標簽，內容被更多用戶設備訪問，維護成本也會降低。
指定標准，能夠規避不同開發商開發出來不同的浏覽器顯示不一致問題，同時��
某些頁面在Windows 下的Internet Explorer出現一些奇怪的現象:以無樣式顯示頁面內容的瞬間閃爍,這種現象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡稱為FOUC.原因大致為： 1，使用import方法導入樣式表。 2，將樣式表放在頁面底部 3，有幾個樣式表，放在html結構的不同位置。其實原理很清楚：當樣式表晚於 結構性html 加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析後，將重新渲染頁面，也就出現了短暫 的 花屏現象。
解決方法：使用LINK標簽將樣式表放在文檔HEAD中更多
1）用戶輸入網址
2）浏覽器通過DNS獲取網站的IP地址
3）浏覽器嘗試與服務器建立連接
4）服務器發送永久重定向
5）浏覽器跟蹤從定向地址
7）服務器處理請求
8）服務器發送HTML響應
9）浏覽器開始顯示HTML
10）浏覽器發送獲取嵌套在html中的元素
關於頁面渲染過程：
1）解析HTML代碼，生成一棵DOM樹
2）解析CSS文件
3）生成渲染樹（受樣式影響，包含不可見元素）
4）渲染樹中的節點
HTML相關問題：
位於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要求嚴格：放棄了一些語義不好的標簽，必須有head、body，每個dom必須要閉合。一些老的浏覽器並不兼容。
為contentType屬性值，IE不支持application/xhtml+xml類型，支持text/html
使用統一的UTF-8編碼
1）制圖時，應該講圖形的圖像層與文本層分離，這樣在重新繪制改圖形時只需對文本進行翻譯。
2）設置控件屬性應考慮到各種語言版本的文本顯示，盡可能為翻譯預留足夠的空間。同時也應該保持不同語言界面的統一性，避免過多的差異。
3）編碼注意代碼復用，將多個模塊的共用信息存放在共通的文件中便於全局管理。
頁面請求的過程可描述如下:
1）用戶在終端選擇自己所偏好的語言,並通過浏覽器向服務器發送頁面請求。
2）模板界面接收到語言選項後,從資源文件中讀取相應區域的資源。
3）在響應用戶的頁面請求時,系統將根據檢索到的語言選項,動態的加載相關區域的JS文件和CSS文件,為不同區域初始化不同的樣式。
4）數據庫接口接收到語言選項後,將其作為一個SQL參數傳入數據庫,檢索相應區域的數據。
5）模板界面將接收到的各種信息,組織成Html代碼,再發送給浏覽器,顯示給終端用戶。
該架構的核心是模板界面,它主要負責將接收到的各類信息組織成Html代碼。
data-是HTML5為前端開發者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的浏覽器可以通過 getAttribute方法獲取。
1）Web Storage API
2）基於位置服務LBS
3）無插件播放音頻視頻
4）調用相機和GPU圖像處理單元等硬件設備
5）拖拽和Form API
共同點：都是保存在浏覽器端，且同源的。
區別：
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是把參數數據隊列加到提交表單的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 相關問題：
目前的浏覽器還都允許用多個相同ID，一般情況下也能正常顯示，不過當你需要用JavaScript通過id來控制div時就會出現錯誤。
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.css是一個可以定制的css文件，它讓不同的浏覽器在渲染元素時形式更統一。
問題成因：在一個容器中，有兩個浮動的子元素，會造成顯示結果意想不到的問題。在CSS規范中，浮動定位不屬於正常的頁面流，而是獨立定位的。
關於css的定位機制：普通流，浮動，絕對定位（position：fixed是position：absolute的一個子類）。浮動的框可以左右移動，直到它的外邊緣遇到包含框或者另一個浮動框的邊緣，所以才說浮動定位不屬於正常的頁面流。文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，就會出現包含框不會自動伸縮高度類筆盒浮動元素。所以，只含有浮動元素的父容器在顯示時不需要考慮子元素的位置，就造成顯示父容器像空容器一樣。
解決浮動：
1）添加額外標簽
在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>。
優點：比空標簽方式語義稍強，代碼量較少
缺點：同樣有違結構與表現的分離，不推薦使用
3)父元素設置 overflow：hidden
通過設置父元素overflow值設置為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1。<div class="warp" id="float3" >
優點：不存在結構和語義化問題，代碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；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。
優點：結構和語義化完全正確,代碼量居中
缺點：復用方式不當會造成代碼量增加
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的技術布局到頁面上。這樣做的好處是，減少圖片數量，將會減少http的請求，提升網站性能。
1）在photoshop新建背景透明的畫板，將小圖片依次擺放在畫板中，調整小圖片為適當大小。
2）通過標尺記錄圖片的橫坐標縱坐標。
3）編寫css代碼background:url(....) no-repeat x-offset y-offset;同時設定元素固定高度和寬度，overflow:hidden
不論是對浏覽者還是對搜索引擎，文字都是最佳的頁面內容展示方式，但是，由於字體等原因的限制，純文字的展示漸漸無法滿足愛美的設計師的要求。
於是，出��了通過CSS來實現用圖片替換文字的方法，這種方式既能實現頁面上各種豐富的效果，又能滿足搜索引擎優化的需要。
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 裡面的背景圖無法顯示，將顯示下層的文字內容，不影響正常使用。但是，此方法也有一個缺陷，就是背景圖不能透明，否則將透出下面的文字。
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層
具體實現：
1、css隱藏DIV及內容，完全隱藏內容與布局。display:none或者visibility:hidden
（面試官也許會問到：關於display:none和visible:hidden區別）
display:none和visible:hidden都能把網頁上某個元素隱藏起來，但兩者有區別:
display:none ---不為被隱藏的對象保留其物理空間，即該對象在頁面上徹底消失，通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見，但該對象在網頁上所占的空間沒有改變，通俗來說就是看不見但摸得到。
2、通過對象盒子設置縮進樣式（text-indent:-9999px）方法可以隱藏超鏈接文本內容
同樣道理，可以用來隱藏圖片上方文字。此類問題我們常見於LOGO處使用，我們想讓圖片作為背景，而圖片上方放A鏈接文字內容，但html錨文本功能仍然正常也能鼠標點擊使用。圖片作為背景而html代碼內看不到圖片，但文字也存在，卻是文字隱藏圖片顯示出，鼠標也能點擊指向。
3、overflow: hidden 隱藏溢出DIV內容或圖片
4、css隱藏滾動條
使用overflow-y:hidden;和overflow-x:hidden來隱藏或顯示對應橫或豎方向的滾動條。
“網格系統”，運用固定的格子設計版面布局，其風格工整簡潔。
“使用柵格系統的網頁設計，非常的有條理性；看上去也很舒服。最重要的是，它給整個網站的頁面結構定義了一個標准。對於視覺設計師來說，他們不用再為設計一個網站每個頁面都要想一個寬度或高度而煩惱了。對於前端開發工程師來說，頁面的布局設計將完全是規范的和可重用的，這將大大節約了開發成本。對於內 容編輯或廣告銷售來說，所有的廣告都是規則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了”
Bootstrap內置了一套響應式、移動設備優先的流式柵格系統，隨著屏幕設備或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。
針對http://topview123.sinaapp.com/細說
設備寬度(device-width)未必是布局寬度(width)，為了讓非適應性布局與手機相適應，我們跟關心視圖寬度，因此需要一種方式來設定寬度，這樣可以使用媒體查詢檢測。
讓視圖的寬度和設備寬度一致
<meta element = "viewport"
content = "width=device
initial-scale = 1" >
每種布局，都應該根據目標設備指定固定寬度設計
@media screen and (max-width:320px){}
為移動設備調整網頁圖像。在最基本的頁面，一個移動優化的網站就是其布局、內容、互動都經過調整，以適應移動環境。最常見的做法是使用css媒體查詢的功能為不同大小的屏幕提供不同的風格；為較小的屏幕優化布局，可以通過針對移動設備的模塊服務。
不同設備的分離設計->根據監視屏幕大小進行設計->（媒體查詢，靈活排版，圖像結合）
CSS控制網頁打印樣式：
使用CSS控制打印樣式，握剛剛使用時一塌糊塗，根本不知道CSS中的midia的作用是什麼，問到別人說導入這個樣式，還傻乎乎的不知所措。如果你也有這種現象，那麼我告訴你吧，在W3school查到CSS的midia的作用。
midia 定義和用法：
media 屬性規定被鏈接文檔將顯示在什麼設備上。
media 屬性用於為不同的媒介類型規定不同的樣式。
原來用到media來指定css的媒體類型，它的語法格式有這樣幾種：
@media screen | print | projection | braille | aural | tv | handheld | all
參數說明：
screen：指計算機屏幕。
print：指用於打印機的不透明介質。
projection：指用於顯示的項目。
braille：盲文系統，指有觸覺效果的印刷品。
aural：指語音電子合成器。
tv：電視類型的媒體。
handheld：指手持式顯示設備。
all：用於所有媒體。
只要導入將不想打印的東西加入下面這CSS樣式聲明中，將在打印的頁面不會出現：
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
例如：
<style midia="print">//midia必須聲明，不然無效了
#my_hidden{display:none;}
</style>
1）reset。參照上題“描述下 “reset” CSS 文件的作用和使用它的好處”的答案。
2）規范命名。尤其對於沒有語義化的html標簽，例如div，所賦予的class值要特別注意。
2）抽取可重用的部件，注意層疊樣式表的“優先級”。
（這裡我會實話實說）過去一直沒有機會接觸“預處理器”，缺的不是學習的熱情和動力，而是一種會使用到這門高深技術的需求，希望日後參與的項目將會用到這門技術，能夠將學習揉入實際開發中。關於CSS 預處理器，我知道是一種語言用來為 CSS 增加一些編程的的特性，無需考慮浏覽器的兼容性問題，例如你可以在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等諸多好處。
1）圖片替代
2）好是跟產品溝通，盡量使用默認就有的字體。雖然我們可以用webfonts，但它在頁面加載的時候會將整個字體包都下載下來，這對於手機端網頁來說無疑是致命的。如果產品一定要用非標准字體，可用這個軟件FontCreator，可以從一個字體包中將你這個頁面需要的那幾個字提取出來，打成一個新的字體包，這樣會節省很多流量
浏覽器會根據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 匹配要快得多。
網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性。
每個盒子都有：邊界、邊框、填充、內容四個屬性；
每個屬性都包括四個部分：上、右、下、左；這四部分可同時設置，也可分別設置；
說到 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 屬性規定元素應該生成的框的類型。但是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的同行特性。
在用CSS+DIV進行布局的時候，一直對position的四個屬性值relative,absolute,static,fixed分的不是很清楚，以致經常會出現讓人很郁悶的結果。今天研究了一下，總算有所了解。在此總結一下：
先看下各個屬性值的定義：
1、static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2、relative：生成相對定位的元素，通過top,bottom,left,right的設置相對於其正常位置進行定位。可通過z-index進行層次分級。
3、absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
4、fixed：生成絕對定位的元素，相對於浏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。可通過z-index進行層次分級。
static與fixed的定位方式較好理解，在此不做分析。下面對應用的較多的relative和absolute進行分析：
1、relative。定位為relative的元素脫離正常的文本流中，但其在文本流中的位置依然存在。
黃色背景的層定位為relative，紅色邊框區域為其在正常流中的位置。在通過top、left對其定位後，從灰色背景層的位置可以看出其正常位置依然存在。
2、absolute。定位為absolute的層脫離正常文本流，但與relative的區別是其在正常流中的位置不在存在。在將黃色背景層定位為absolute後，灰色背景層自動補上。
3、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：生成絕對定位的元素，相對於浏覽器窗口進行定位。
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，並兼容大部分jQuery插件。
http://www.w3cplus.com/css3/a-guide-to-flexbox.html
http://zh.learnlayout.com/flexbox.html
自適應布局（Adaptive Layout）
自適應布局（Adaptive）的特點是分別為不同的屏幕分辨率定義布局。布局切換時頁面元素發生改變，但在每個布局中，頁面元素不隨窗口大小的調整發生變化。就是說你看到的頁面，裡面元素的位置會變化而大小不會變化；
你可以把自適應布局看作是靜態布局的一個系列。
流式布局（Liquid Layout）
流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
響應式布局（Responsive Layout）
分別為不同的屏幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著窗口調整而自動適配。
可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
總結
通過本博文，你收獲了什麼。最大的感觸是，博主的認真細心，毅力很強（博文很長，總共花了寫了二十幾個小時），每一個問題都很認真地回答，她把這些問題都看作是正式的面試題；關於平時的工作任務，她也很認真對待。哎呀，不要臉，不知不覺又驕傲起來了，羞羞哒~~~
學習編程本來就是需要持續需要耐心和細心作為底層支撐，平時積累很重要！
