一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過程中闷沥，你是如何考慮他的UI萎战、安全性、高性能舆逃、SEO蚂维、可維護(hù)性以及技術(shù)因素的戳粒？
UI：界面美觀，要有個(gè)性虫啥，考慮用戶使用的邏輯要簡(jiǎn)單蔚约，用起來(lái)舒適自由。使用習(xí)慣要符合大部分用戶的習(xí)慣涂籽，比如少讓用戶輸入苹祟，采用選擇的方式，提供搜索和提示功能评雌。
安全性：
1树枫、對(duì)輸入進(jìn)行有效性驗(yàn)證（非法字符，特殊字符）如PHP中的方法htmlspecialchars()將特殊字符（>）轉(zhuǎn)化為html實(shí)體景东，trim()去掉用戶輸入的不必要字符砂轻，stripslashes()去掉用戶輸入的反斜杠等等。
2耐薯、對(duì)交互操作進(jìn)行身份驗(yàn)證和授權(quán)
3舔清、注入攻擊；注入攻擊是應(yīng)用違背了“數(shù)據(jù)與代碼分離原則”導(dǎo)致的結(jié)果曲初。它有兩個(gè)條件：一是用戶能夠控制數(shù)據(jù)的輸入体谒；二是代碼拼湊了用戶輸入的數(shù)據(jù)，把數(shù)據(jù)當(dāng)作代碼執(zhí)行了
7臼婆、不安全的存儲(chǔ)抒痒；不要使用單獨(dú)類似MD5或SHA加密策略，在進(jìn)行散列密碼值時(shí)颁褂，使用作料或多種作料以防止彩虹攻擊故响。對(duì)于短密碼，采用一個(gè)短散列算法處理颁独，例如：bcrypt或scrypt彩届。
高性能：1:DNS負(fù)載均衡 2:HTTP重定向 3:分布式緩存 4:數(shù)據(jù)庫(kù)擴(kuò)展 5:反向代理負(fù)載均衡
SEO：選好關(guān)鍵字，描述語(yǔ)言誓酒，修飾性圖片換成文本樟蠕，合理使用h1-h6，對(duì)圖片添加alt屬性靠柑，鏈接添加target屬性寨辩。
可維護(hù)性：代碼是否容易被理解，是否容易被修改和增加新的功能歼冰，當(dāng)出現(xiàn)問題時(shí)是否能快速定位到問題代碼靡狞。
二:你能描述一下當(dāng)你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎？
內(nèi)容分析：分清展現(xiàn)在網(wǎng)絡(luò)中內(nèi)容的層次和邏輯關(guān)系
結(jié)構(gòu)設(shè)計(jì)：寫出合理的html結(jié)構(gòu)代碼
布局設(shè)計(jì)：使用html+css進(jìn)行布局
樣式設(shè)計(jì)：首先要使用reset.css
交互設(shè)計(jì)：鼠標(biāo)特效
行為設(shè)計(jì)：js代碼隔嫡，ajax頁(yè)面行為和從服務(wù)器獲取數(shù)據(jù)
測(cè)試兼容性甸怕；優(yōu)化性能甘穿。
三:假若你有 5 個(gè)不同的樣式文件 (stylesheets), 整合進(jìn)網(wǎng)站的最好方式是?
根據(jù)class命名規(guī)則寫樣式，這樣樣式不會(huì)沖突蕾各，提取公共的樣式扒磁，進(jìn)行合并庆揪，非公共的單獨(dú)拎出來(lái)式曲。然后打包壓縮一下就行了，若每個(gè)文件都很大缸榛，就需要分模塊加載吝羞。
四：什么是漸進(jìn)增強(qiáng)（progressive enhancement）、優(yōu)雅降級(jí)（graceful degradation）呢内颗？
漸進(jìn)增強(qiáng)（progressiveenhancement）：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面钧排，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果均澳、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)恨溜。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能找前，向頁(yè)面添加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能糟袁。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用躺盛。）
優(yōu)雅降級(jí)（gracefuldegradation）：一開始就構(gòu)建完整的功能项戴，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。（Web站點(diǎn)在所有新式瀏覽器中都能正常工作槽惫，如果用戶使用的是老式瀏覽器周叮，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題界斜，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了仿耽，為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效各薇。）
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始项贺，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非车妹樱基礎(chǔ)的敬扛、能夠起作用的版本開始，并不斷擴(kuò)充朝抖，以適應(yīng)未來(lái)環(huán)境的需要啥箭。
五：你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化？
1.盡可能減少http請(qǐng)求次數(shù)治宣，將css, js, 圖片各自合并
2.使用CDN急侥，降低通信距離
3.添加Expire/Cache-Control頭
4.啟用Gzip壓縮文件
5.將css放在頁(yè)面最上面
6.將script放在頁(yè)面最下面
7.避免在css中使用表達(dá)式
8.將css, js都放在外部文件中
9.減少DNS查詢
10.最小化css, js砌滞，減小文件體積
11.避免重定向
12.移除重復(fù)腳本
13.配置實(shí)體標(biāo)簽ETag
14.使用AJAX緩存，讓網(wǎng)站內(nèi)容分批加載坏怪，局部更新
六：為什么利用多個(gè)域名來(lái)提供網(wǎng)站資源更有效贝润？瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源？
- 靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容分服務(wù)器存放铝宵，使用不同的服務(wù)器處理請(qǐng)求打掘。處理動(dòng)態(tài)內(nèi)容的只處理動(dòng)態(tài)內(nèi)容，不處理別的鹏秋，提高效率尊蚁，這樣使得CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）緩存更方便
2、 突破瀏覽器并發(fā)限制 (你隨便挑一個(gè) G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4換成 lh3,lh6 啥的侣夷，都照樣能夠訪問横朋，像地圖之類的需要大量并發(fā)下載圖片的站點(diǎn)，這個(gè)非常重要百拓。)
3琴锭、跨域不會(huì)傳cookie,節(jié)省寬帶
七：請(qǐng)說出三種減少頁(yè)面加載時(shí)間的方法
1.盡可能減少http請(qǐng)求次數(shù)，將css, js, 圖片各自合并
2.使用CDN衙传，降低通信距離
3.添加Expire/Cache-Control頭
4.啟用Gzip壓縮文件
5.將css放在頁(yè)面最上面
6.將script放在頁(yè)面最下面
7.避免在css中使用表達(dá)式
8.將css, js都放在外部文件中
9.減少DNS查詢
10.最小化css, js决帖，減小文件體積
11.避免重定向
12.移除重復(fù)腳本
13.配置實(shí)體標(biāo)簽ETag
14.使用AJAX緩存，讓網(wǎng)站內(nèi)容分批加載粪牲，局部更新
八：請(qǐng)寫一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
<!DOCTYPE html>
<html>
<head>
<title>幻燈片</title>
<style type="text/css">
.myDiv{
width:600px;
height:400px;
margin:20px auto;
background-size:over;
background-postion:center;
-webkit-animation-name: "loop";
-webkit-animation-duration:20s;
-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes "loop"{
0%{background:url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
25%{background:url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
50%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
75%{background:url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
100%{background:url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg)no-repeat;}
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
九：請(qǐng)談?wù)勀銓?duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解古瓤。
網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓web發(fā)展的更‘健康’，首先約束瀏覽器開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)腺阳，其次約束網(wǎng)站開發(fā)者落君，這樣降低開發(fā)難度，開發(fā)成本亭引，SEO也會(huì)更好做绎速，也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種BUG、安全問題焙蚓，最終提高網(wǎng)站易用性纹冤。
十：什么是 FOUC (無(wú)樣式內(nèi)容閃爍)？你如何來(lái)避免 FOUC购公？
如果使用import方法對(duì)CSS進(jìn)行導(dǎo)入,會(huì)導(dǎo)致某些頁(yè)面在Windows 下的InternetExplorer出現(xiàn)一些奇怪的現(xiàn)象:以無(wú)樣式顯示頁(yè)面內(nèi)容的瞬間閃爍,這種現(xiàn)象稱之為文檔樣式短暫失效(Flash of Unstyled Content),簡(jiǎn)稱為FOUC萌京。
原因大致為：
1，使用import方法導(dǎo)入樣式表宏浩。
2知残，將樣式表放在頁(yè)面底部
3，有幾個(gè)樣式表比庄，放在html結(jié)構(gòu)的不同位置求妹。
其實(shí)原理很清楚：當(dāng)樣式表晚于結(jié)構(gòu)性html加載乏盐，當(dāng)加載到此樣式表時(shí)，頁(yè)面將停止之前的渲染制恍。此樣式表被下載和解析后父能，將重新渲染頁(yè)面，也就出現(xiàn)了短暫的花屏現(xiàn)象净神。
解決方法：
使用LINK標(biāo)簽將樣式表放在文檔HEAD中何吝。
十一：請(qǐng)解釋 CSS 動(dòng)畫和 JavaScript 動(dòng)畫的優(yōu)缺點(diǎn)。
JS動(dòng)畫
缺點(diǎn)：(1)JavaScript在瀏覽器的主線程中運(yùn)行强挫，而主線程中還有其它需要運(yùn)行的JavaScript腳本岔霸、樣式計(jì)算薛躬、布局俯渤、繪制任務(wù)等,對(duì)其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況型宝。
(2)代碼的復(fù)雜度高于CSS動(dòng)畫
優(yōu)點(diǎn)：(1)JavaScript動(dòng)畫控制能力很強(qiáng), 可以在動(dòng)畫播放過程中對(duì)動(dòng)畫進(jìn)行控制：開始八匠、暫停、回放趴酣、終止梨树、取消都是可以做到的。
(2)動(dòng)畫效果比css3動(dòng)畫豐富,有些動(dòng)畫效果岖寞，比如曲線運(yùn)動(dòng),沖擊閃爍,視差滾動(dòng)效果抡四，只有JavaScript動(dòng)畫才能完成
(3)CSS3有兼容性問題，而JS大多時(shí)候沒有兼容性問題
CSS動(dòng)畫
缺點(diǎn)：(1)運(yùn)行過程控制較弱,無(wú)法附加事件綁定回調(diào)函數(shù)仗谆。CSS動(dòng)畫只能暫停,不能在動(dòng)畫中尋找一個(gè)特定的時(shí)間點(diǎn)指巡，不能在半路反轉(zhuǎn)動(dòng)畫，不能變換時(shí)間尺度隶垮，不能在特定的位置添加回調(diào)函數(shù)或是綁定回放事件,無(wú)進(jìn)度報(bào)告
(2)代碼冗長(zhǎng)藻雪。想用 CSS 實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動(dòng)畫,最后CSS代碼都會(huì)變得非常笨重。
優(yōu)點(diǎn)：(1)瀏覽器可以對(duì)動(dòng)畫進(jìn)行優(yōu)化狸吞。
瀏覽器使用與 requestAnimationFrame 類似的機(jī)制勉耀，requestAnimationFrame比起setTimeout，setInterval設(shè)置動(dòng)畫的優(yōu)勢(shì)主要是:1)requestAnimationFrame 會(huì)把每一幀中的所有DOM操作集中起來(lái)蹋偏，在一次重繪或回流中就完成,并且重繪或回流的時(shí)間間隔緊緊跟隨瀏覽器的刷新頻率,一般來(lái)說,這個(gè)頻率為每秒60幀便斥。2)在隱藏或不可見的元素中requestAnimationFrame不會(huì)進(jìn)行重繪或回流，這當(dāng)然就意味著更少的的cpu威始，gpu和內(nèi)存使用量枢纠。強(qiáng)制使用硬件加速 （通過 GPU 來(lái)提高動(dòng)畫性能）
十二：什么是跨域資源共享 (CORS)？它用于解決什么問題字逗？
默認(rèn)情況下京郑，為預(yù)防某些而已行為宅广，瀏覽器的XHR對(duì)象只能訪問來(lái)源于同一個(gè)域中的資源。但是我們?cè)谌粘?shí)際開發(fā)中些举，常常會(huì)遇到跨域請(qǐng)求的需求跟狱，因此就出現(xiàn)了一種跨域請(qǐng)求的方案：CORS（Cross-Origin Resource Sharing）跨域資源共享。CORS背后的原理是：使用自定的HTTP頭部與服務(wù)器進(jìn)行溝通户魏，從而由服務(wù)器決定響應(yīng)是否成功驶臊。
如何使用CORS？
使用CORS需要客戶端和服務(wù)端兩者配合叼丑。
1关翎、客戶端如何發(fā)起CORS跨域請(qǐng)求？
目前在大多數(shù)瀏覽器下(CORS在各瀏覽器下支持情況)鸠信，都原生支持CORS纵寝，代碼編寫時(shí)和同域的請(qǐng)求差不多，只需要在xhr.open()的時(shí)候傳入絕對(duì)URL即可星立。例如：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
console.log(xhr.responseText)
}else {
console.log('err' + xhr.status);
}
}
};
xhr.open('get','http://www.xxx.com/api/something/',true);
xhr.send(null);
這樣就可以發(fā)送一個(gè)跨域請(qǐng)求了爽茴，但是如果只是如上面示例代碼一樣發(fā)送的話會(huì)報(bào)錯(cuò)，因?yàn)榉?wù)器并未設(shè)置允許我們這個(gè)請(qǐng)求绰垂，因此CORS還需要服務(wù)端來(lái)配合室奏。
2、服務(wù)器如何允許客戶的CORS跨域請(qǐng)求劲装？
服務(wù)器只需要在響應(yīng)頭部中設(shè)置Access-Control-Allow-Origin即可讓客戶端訪問胧沫。
假設(shè)客戶端的域名是http://www.xxx.com，那么服務(wù)端只要在Access-Control-Allow-Origin的設(shè)置中含有http://www.xxx.com占业，那么這個(gè)CORS請(qǐng)求即可成功绒怨。如果Access-Control-Allow-Origin設(shè)置為*，那么任意域名都可以訪問這個(gè)服務(wù)端纺酸，但是為了安全起見窖逗，一般并不建議這樣做。
十三：doctype(文檔類型) 的作用是什么餐蔬？
doctype使瀏覽器按照dtd指定的渲染方式對(duì)頁(yè)面進(jìn)行渲染
Web 世界中存在許多不同的文檔碎紊。只有了解文檔的類型，瀏覽器才能正確地顯示文檔樊诺。
HTML 也有多個(gè)不同的版本仗考，只有完全明白頁(yè)面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁(yè)面词爬。這就是 <!DOCTYPE> 的用處秃嗜。
<!DOCTYPE> 不是 HTML 標(biāo)簽甫恩。它為瀏覽器提供一項(xiàng)信息（聲明）铐达，即 HTML 是用什么版本編寫的
如果你的頁(yè)面添加了<!DOCTYPE html>那么，那么就等同于開啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實(shí)實(shí)的按照W3C的
十四：瀏覽器標(biāo)準(zhǔn)模式 (standards mode) 岛马、幾乎標(biāo)準(zhǔn)模式（almost standards mode）和怪異模式 (quirks mode) 之間的區(qū)別是什么望几？
所謂的標(biāo)準(zhǔn)模式是指端礼，瀏覽器按W3C標(biāo)準(zhǔn)解析執(zhí)行代碼括饶；怪異模式則是使用瀏覽器自己的方式解析執(zhí)行代碼，因?yàn)椴煌瑸g覽器解析執(zhí)行的方式不一樣恕洲，所以我們稱之為怪異模式塔橡。瀏覽器解析時(shí)到底使用標(biāo)準(zhǔn)模式還是怪異模式，與你網(wǎng)頁(yè)中的DTD聲明直接相關(guān)霜第，DTD聲明定義了標(biāo)準(zhǔn)文檔的類型（標(biāo)準(zhǔn)模式解析）文檔類型葛家，會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁(yè)并顯示，忽略DTD聲明,將使網(wǎng)頁(yè)進(jìn)入怪異模式(quirks mode)癞谒。
幾乎標(biāo)準(zhǔn)模式（almost standards mode）是Firefox1+的設(shè)定的，類似于標(biāo)準(zhǔn)模式
十五：HTML 和 XHTML 有什么區(qū)別末誓？
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言扯俱，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，看起來(lái)與HTML有些相象喇澡，只有一些小的但重要的區(qū)別，XHTML就是一個(gè)扮演著類似HTML的角色的XML殊校，所以晴玖，本質(zhì)上說，XHTML是一個(gè)過渡技術(shù)为流，結(jié)合了XML(有幾分)的強(qiáng)大功能及HTML(大多數(shù))的簡(jiǎn)單特性呕屎。
HTML 和 XHTML 的區(qū)別簡(jiǎn)單來(lái)說，XHTML 可以認(rèn)為是 XML 版本的 HTML敬察，為符合 XML 要求秀睛，XHTML 語(yǔ)法上要求更嚴(yán)謹(jǐn)些。
以下是 XHTML 相對(duì) HTML 的幾大區(qū)別：
XHTML 要求正確嵌套
XHTML 所有元素必須關(guān)閉
XHTML 區(qū)分大小寫
XHTML 屬性值要用雙引號(hào)
XHTML 用 id 屬性代替 name 屬性
XHTML 特殊字符的處理
十六：如果頁(yè)面使用 'application/xhtml+xml' 會(huì)有什么問題嗎莲祸？
使用xhtml,頁(yè)面結(jié)構(gòu)中必須包含head標(biāo)簽,并且每個(gè)標(biāo)簽結(jié)構(gòu)都要關(guān)閉,包括空標(biāo)簽蹂安。所有標(biāo)簽都要小寫。使用了'application/xhtml+xml'之后,部分老瀏覽器不會(huì)支持
十七：如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言锐帜，你會(huì)怎么做田盈？
采用統(tǒng)一編碼UTF-8方式編碼：應(yīng)用字符集的選擇；所以對(duì)提供了多語(yǔ)言版本的網(wǎng)站來(lái)說缴阎，Unicode字符集應(yīng)該是最理想的選擇允瞧。它是一種雙字節(jié)編碼機(jī)制的字符集，不管是東方文字還是西方文字，在Unicode中一律用兩個(gè)字節(jié)來(lái)表示述暂，因而至少可以定義65536個(gè)不同的字符痹升，幾乎可以涵蓋世界上目前所有通用的語(yǔ)言的每一種字符。所以在設(shè)計(jì)和開發(fā)多語(yǔ)言網(wǎng)站時(shí)畦韭，一定要注意先把非中文頁(yè)面的字符集定義為“utf-8”格式
語(yǔ)言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu)：有些國(guó)家的語(yǔ)言書寫習(xí)慣是從右到左视卢，例如許多中東地區(qū)所使用的阿拉伯語(yǔ)，波斯語(yǔ)和希伯來(lái)語(yǔ)等等廊驼。如果你的市場(chǎng)目標(biāo)是這些語(yǔ)言的國(guó)家据过，那么在網(wǎng)站設(shè)計(jì)中就需要考慮這些特殊的語(yǔ)言書寫習(xí)慣。而且如果你在網(wǎng)站導(dǎo)航結(jié)構(gòu)設(shè)計(jì)中使用的是一個(gè)豎直導(dǎo)航欄妒挎，這時(shí)候就應(yīng)該把它放在右邊绳锅，而不是象我們習(xí)慣的那樣放在左邊了。
多語(yǔ)言網(wǎng)站實(shí)現(xiàn)計(jì)劃 ：
靜態(tài)：就是為每種語(yǔ)言分辨準(zhǔn)備一套頁(yè)面文件酝掩，要么通過文件后綴名來(lái)區(qū)分不同語(yǔ)言鳞芙，要么通過子目錄來(lái)區(qū)分不同語(yǔ)言。
例如對(duì)于首頁(yè)文件index_en.htm供給英語(yǔ)界面期虾，index_gb.htm供給簡(jiǎn)體中文界面原朝，index_big.htm供給繁體中文界面，或者是en/index.htm供給英語(yǔ)界面镶苞，gb/index.htm供給簡(jiǎn)體中文界面喳坠，big/index.htm供給繁體中文界面，一旦用戶選擇了需要的語(yǔ)言后茂蚓，主動(dòng)跳轉(zhuǎn)到相應(yīng)的頁(yè)面壕鹉，首頁(yè)以下其他鏈接也是按照同樣方法處理。從保護(hù)的角度來(lái)看聋涨，通過子目錄比通過文件后綴名來(lái)區(qū)分不同語(yǔ)言版本顯得要簡(jiǎn)略明了晾浴。
動(dòng)態(tài)：站點(diǎn)內(nèi)所有頁(yè)面文件都是動(dòng)態(tài)頁(yè)面文件（PHP，ASP等）而不是靜態(tài)頁(yè)面文件牍白，在需要輸出語(yǔ)言文字的處所同一采用語(yǔ)言變量來(lái)表現(xiàn)脊凰，這些語(yǔ)言變量可以根據(jù)用戶選擇不同的語(yǔ)言賦予不同的值，從而能夠?qū)崿F(xiàn)在不同的語(yǔ)言環(huán)境下輸出不同的文字茂腥。
例如：語(yǔ)言變量ln_name狸涌，當(dāng)用戶選擇的語(yǔ)言是英語(yǔ)時(shí)賦值為“Name”，當(dāng)用戶選擇的語(yǔ)言是簡(jiǎn)體中文時(shí)賦值為“姓名”础芍，這樣就可以適應(yīng)不同語(yǔ)言時(shí)的輸出杈抢。
采用靜態(tài)方法的長(zhǎng)處是頁(yè)面直接輸出到客戶端，不需要在服務(wù)器上運(yùn)行仑性，占用服務(wù)器的資源比擬少惶楼，系統(tǒng)能夠支撐的并發(fā)連接數(shù)較多，毛病是要為每種語(yǔ)言制作一套頁(yè)面文件，很多內(nèi)容即使是和語(yǔ)言無(wú)關(guān)的也要分不同語(yǔ)言來(lái)存儲(chǔ)歼捐，因此占用的存儲(chǔ)空間較多何陆。
采用動(dòng)態(tài)方法和靜態(tài)方法的優(yōu)毛病正好相反，它的長(zhǎng)處是動(dòng)態(tài)頁(yè)面文件只有一套豹储，不同語(yǔ)言的文字應(yīng)用語(yǔ)言變量來(lái)存儲(chǔ)贷盲，和語(yǔ)言無(wú)關(guān)的內(nèi)容只存儲(chǔ)一份，占用的存儲(chǔ)空間較少剥扣，并且擴(kuò)大新語(yǔ)言比擬輕易巩剖，毛病需要在服務(wù)器上運(yùn)行，然后把成果輸進(jìn)到客戶端钠怯，占用服務(wù)器的資源比擬多佳魔，系統(tǒng)能夠支撐的并發(fā)連接數(shù)較少。
十八：使用 data- 屬性的好處是什么晦炊？
HTML5規(guī)范里增加了一個(gè)自定義data屬性.
為前端開發(fā)者提供自定義的屬性鞠鲜，這些屬性集可以通過對(duì)象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute方法獲取
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>div.dataset.commentNum; // 10
需要注意的是断国，data-之后的以連字符分割的多個(gè)單詞組成的屬性贤姆，獲取的時(shí)候使用駝峰風(fēng)格：比如
<div id="content" data-user-list="user_list">data-user_list自定義屬性 </div>
//js
var content= document.getElementById('content');
alert(content.dataset.userList)
//jQuery
$('#content').data('userList');//讀
并不是所有的瀏覽器都支持.dataset屬性，測(cè)試的瀏覽器中只有Chrome和Opera支持稳衬。
通過js方式給data-*設(shè)置值
<div id="content" data-user-list="user_list">data-user_list自定義屬性 </div>
//js
var content= document.getElementById('content');
content.dataset.name='我叫tom'
alert(content.dataset.name)
//jquery
$('#content').data('name','我叫tom');//寫
getAttribute/setAttribute方法的使用
var content= document.getElementById('content');
content.dataset.birthDate = '19990619';
content.setAttribute('age', 25);
console.log(content.getAttribute('data-age')); //25 console.log(content.getAttribute('data-birth-date')); //19990519
十九：請(qǐng)描述 cookies霞捡、sessionStorage 和 localStorage 的區(qū)別。
軟件編程希望通過一些手段來(lái)持久化的存儲(chǔ)一些有用的數(shù)據(jù)宋彼。對(duì)于網(wǎng)絡(luò)化編程弄砍，一般將這項(xiàng)任務(wù)交給了服務(wù)器端的數(shù)據(jù)庫(kù)或者瀏覽器端的cookie。隨著HTML5的出現(xiàn)输涕，web開發(fā)又有了兩種選擇：Web Storage和Web SQL Database.
WebStorage有兩種形式：LocalStorage（本地存儲(chǔ)）和sessionStorage（會(huì)話存儲(chǔ)）。這兩種方式都允許開發(fā)者使用js設(shè)置的鍵值對(duì)進(jìn)行操作慨畸，在在重新加載不同的頁(yè)面的時(shí)候讀出它們莱坎。這一點(diǎn)與cookie類似。
1:cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）寸士，即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞檐什。而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存弱卡。cookie數(shù)據(jù)還有路徑（path）的概念乃正，可以限制cookie只屬于某個(gè)路徑下。
2:存儲(chǔ)大小限制也不同婶博，cookie數(shù)據(jù)不能超過4k瓮具，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie，所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)名党。sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制叹阔，但比cookie大得多，可以達(dá)到5M或更大传睹。
3:數(shù)據(jù)有效期不同耳幢，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持欧啤；localStorage：始終有效睛藻，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)邢隧；cookie只在設(shè)置的cookie過期時(shí)間之前一直有效店印，即使窗口或?yàn)g覽器關(guān)閉。
4:作用域不同府框，sessionStorage不在不同的瀏覽器窗口中共享吱窝，即使是同一個(gè)頁(yè)面；localStorage 在所有同源窗口中都是共享的迫靖；cookie也是在所有同源窗口中都是共享的院峡。
5:Web Storage 支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者系宜。
6:Web Storage 的 api 接口使用更方便照激。
二十：請(qǐng)解釋 <script>、<script async> 和 <script defer> 的區(qū)別盹牧。
向html頁(yè)面中插入javascript代碼的主要方法就是通過script標(biāo)簽俩垃。其中包括兩種形式，第一種直接在script標(biāo)簽之間插入js代碼汰寓，第二種即是通過src屬性引入外部js文件口柳。由于解釋器在解析執(zhí)行js代碼期間會(huì)阻塞頁(yè)面其余部分的渲染，對(duì)于存在大量js代碼的頁(yè)面來(lái)說會(huì)導(dǎo)致瀏覽器出現(xiàn)長(zhǎng)時(shí)間的空白和延遲有滑，為了避免這個(gè)問題跃闹，建議把全部的js引用放在</body>標(biāo)簽之前。
script標(biāo)簽存在兩個(gè)屬性毛好，defer和async望艺，因此script標(biāo)簽的使用分為三種情況：
1.<script src="example.js"></script>
沒有defer或async屬性，瀏覽器會(huì)立即加載并執(zhí)行相應(yīng)的腳本肌访。也就是說在渲染script標(biāo)簽之后的文檔之前找默，不等待后續(xù)加載的文檔元素，讀到就開始加載和執(zhí)行吼驶，此舉會(huì)阻塞后續(xù)文檔的加載惩激；
2.<script async src="example.js"></script>
有了async屬性店煞，表示后續(xù)文檔的加載和渲染與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行咧欣；
3.<script defer src="example.js"></script>
有了defer屬性浅缸，加載后續(xù)文檔的過程和js腳本的加載(此時(shí)僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js腳本的執(zhí)行需要等到文檔所有元素解析完成之后魄咕，DOMContentLoaded事件觸發(fā)執(zhí)行之前衩椒。
二十一：為什么通常推薦將 CSS <link> 放置在 <head></head> 之間，而將 JS <script> 放置在 </body> 之前哮兰？你知道有哪些例外嗎毛萌？
如果把javascript放在head里的話，則先被解析,但這時(shí)候body還沒有解析喝滞。（常規(guī)html結(jié)構(gòu)都是head在前阁将，body在后）如果head的js代碼是需要傳入一個(gè)參數(shù)（在body中調(diào)用該方法時(shí)，才會(huì)傳入?yún)?shù)）右遭，并需調(diào)用該參數(shù)進(jìn)行一系列的操作做盅，那么這時(shí)候肯定就會(huì)報(bào)錯(cuò)，因?yàn)楹瘮?shù)該參數(shù)未定義（undefined）窘哈。
而為什么我們經(jīng)炒盗瘢看到有很多的人把js腳本放到head里面都不擔(dān)心出問題？因?yàn)橥ǔ０裫avascript放在head里的話滚婉，一般都會(huì)綁定一個(gè)監(jiān)聽图筹，當(dāng)全部的html文檔解析完之后，再執(zhí)行代碼：
二十二：html 漸進(jìn)式渲染
你需要盡早將 HTML 字節(jié)給到瀏覽器让腹。
比如：一個(gè)請(qǐng)求進(jìn)來(lái)了远剩，（理想狀態(tài)下）你的數(shù)據(jù)被緩存起來(lái)，因此服務(wù)器能夠快速獲取骇窍。然后瓜晤，瀏覽器開始解析數(shù)據(jù)，并在屏幕上呈現(xiàn)出來(lái)腹纳。
對(duì)于此次 WebPageTest活鹰，在 1.5 秒就得到了第一屏，但是你能看到只估，它沒有包含所有內(nèi)容。它包含的內(nèi)容足以讓你開始瀏覽頁(yè)面着绷、或查看假日交易蛔钙。
然后，到 3.5 秒荠医，另一部分載入了更多交易吁脱。到 6.5 秒桑涎，一些東西仍然在載入！事實(shí)上兼贡，整個(gè)頁(yè)面載入的完成一直持續(xù)到 18 秒攻冷。你能等那么長(zhǎng)時(shí)間嗎？我表示懷疑遍希！
如果 Amazon 專注于最慢的頁(yè)面載入等曼，那么一定有人被激怒。他們卻專注于在最早的 packet 里發(fā)送最重要的字節(jié)凿蒜。再進(jìn)一步禁谦，他們可能在第一個(gè) packet 里塞滿最重要的字節(jié)。我敢打賭废封，他們還專注于盡快地為你發(fā)送那些字節(jié)州泊。
二十三：CSS 中類 (classes) 和 ID 的區(qū)別。
在樣式表定義一個(gè)樣式的時(shí)候漂洋，可以定義id也可以定義class遥皂。
在CSS文件里書寫時(shí)，ID加前綴“#”刽漂；CLASS用“.”
id一個(gè)頁(yè)面只可以使用一次演训；class可以多次引用。
ID是一個(gè)標(biāo)簽爽冕，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容仇祭，就象名字，如果一個(gè)屋子有2個(gè)人同名颈畸，就會(huì)出現(xiàn)混淆乌奇；class是一個(gè)樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上眯娱，就象一件衣服礁苗；
目前的瀏覽器還都允許用多個(gè)相同ID，一般情況下也能正常顯示徙缴，不過當(dāng)你需要用JavaScript通過id來(lái)控制div時(shí)就會(huì)出現(xiàn)錯(cuò)誤试伙。
從概念上說就是不一樣的：id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式于样；class是先定義好一種樣式疏叨，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。
二十四：請(qǐng)問 “resetting” 和 “normalizing” CSS 之間的區(qū)別穿剖？你會(huì)如何選擇蚤蔓，為什么？
reset.css能夠重置瀏覽器的默認(rèn)屬性糊余。不同的瀏覽器具有不同的樣式秀又，重置能夠使其統(tǒng)一单寂。比如說ie瀏覽器和FF瀏覽器下button顯示不同，通過reset能夠統(tǒng)一樣式吐辙，顯示相同的想過宣决。但是很多reset是沒必要的，多寫了會(huì)增加瀏覽器在渲染頁(yè)面的負(fù)擔(dān)昏苏。 比如說尊沸，我們不應(yīng)該對(duì)行內(nèi)元素設(shè)置無(wú)效的屬性，對(duì)span設(shè)置width和height捷雕，margin都不會(huì)生效的椒丧。
對(duì)于absolute和fixed定位的固定尺寸（設(shè)置了width和height屬性），如果設(shè)置了top和left屬性救巷，那么bottom和right壶熏，margin和float就沒有作用。
后面設(shè)置的屬性將會(huì)覆蓋前面重復(fù)設(shè)置的屬性浦译。期待能夠指出它的負(fù)面影響棒假，或者提到它的一個(gè)更好的替換者“normalize”
normalize.css是一個(gè)可以定制的css文件，它讓不同的瀏覽器在渲染元素時(shí)形式更統(tǒng)一精盅。
二十五：請(qǐng)解釋浮動(dòng) (Floats) 及其工作原理帽哑。
float屬性定義了元素是否浮動(dòng)及在哪個(gè)方向浮動(dòng)，在CSS中任何元素都可以浮動(dòng)叹俏，且浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框妻枕，而不論它本身是何種元素。并且盒子的寬度不在伸展粘驰，而是根據(jù)盒子里面的內(nèi)容的寬度來(lái)確定屡谐。浮動(dòng)屬性會(huì)使得浮動(dòng)的元素脫離文檔流，所以文檔的普通流中的塊框會(huì)表現(xiàn)的像浮動(dòng)框不存在一樣蝌数。
二十六：描述z-index和疊加上下文是如何形成的愕掏。
首先來(lái)看在CSS中疊加上下文形成的原因： 1.負(fù)邊距 margin為負(fù)值時(shí)元素會(huì)依參考線向外偏移。margin-left/margin-top的參考線為左邊的元素/上面的元素（如無(wú)兄弟元素則為父元素的左內(nèi)側(cè)/上內(nèi)側(cè)）,margin-right和margin-bottom的參考線為元素本身的border右側(cè)/border下側(cè)顶伞。一般可以利用負(fù)邊距來(lái)就行布局饵撑，但沒有計(jì)算好的話就可能造成元素重疊。堆疊順序由元素在文檔中的先后位置決定唆貌，后出現(xiàn)的會(huì)在上面滑潘。 2.position的relative/absolute/fixed定位 當(dāng)為元素設(shè)置position值為relative/absolute/fixed后，元素發(fā)生的偏移可能產(chǎn)生重疊锨咙，且z-index屬性被激活众羡。z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面蓖租。 z-index屬性 z-index只能在position屬性值為relative或absolute或fixed的元素上有效粱侣。 基本原理：z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面蓖宦。 使用相對(duì)性：z-index值只決定同一父元素中的同級(jí)子元素的堆疊順序齐婴。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。向上追溯找不到含有z-index值的父元素的情況下稠茂，則可以視為自由的z-index元素柠偶，它可以與父元素的同級(jí)兄弟定位元素或其他自由的定位元素來(lái)比較z-index的值僵芹，決定其堆疊順序请梢。同級(jí)元素的z-index值如果相同，則堆疊順序由元素在文檔中的先后位置決定琼牧，后出現(xiàn)的會(huì)在上面电爹。所以如果當(dāng)你發(fā)現(xiàn)一個(gè)z-index值較大的元素被值較小的元素遮擋了蔫仙，請(qǐng)先檢查它們之間的dom結(jié)點(diǎn)關(guān)系，多半是因?yàn)槠涓附Y(jié)點(diǎn)含有激活并設(shè)置了z-index值的position定位元素丐箩。
二十七：請(qǐng)描述 BFC(Block Formatting Context) 及其如何工作摇邦。
BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”。
二十八：列舉不同的清除浮動(dòng)的技巧屎勘，并指出它們各自適用的使用場(chǎng)景施籍。
首先來(lái)說明為什么要清除浮動(dòng)？ 當(dāng)一個(gè)容器中的元素全部浮動(dòng)之后概漱，由于浮動(dòng)會(huì)讓元素脫離普通文檔流丑慎，所以對(duì)于外面的這個(gè)容器來(lái)講它就沒有內(nèi)容將它撐開，背景設(shè)置無(wú)法顯示瓤摧，margin設(shè)置無(wú)法顯示竿裂。 清除浮動(dòng)的方法： 一、添加新的元素 姻灶、應(yīng)用 clear：both铛绰； 例如： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="clear"></div> </div>
.clear{clear:both; height: 0; line-height: 0; font-size: 0} 優(yōu)點(diǎn)：簡(jiǎn)單，代碼少产喉，瀏覽器支持好捂掰，不容易出現(xiàn)怪問題 缺點(diǎn)是要增加很多無(wú)效布局，但這是清除浮動(dòng)用的比較多的一種方法曾沈。
二这嚣、父級(jí)div定義overflow：auto或者h(yuǎn)idden <div class="outer over-flow"> //這里添加了一個(gè)class <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題 } 原理：必須定義width或zoom:1，同時(shí)不能定義height塞俱，使用overflow屬性來(lái)清除浮動(dòng)有一點(diǎn)需要注意姐帚，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來(lái)清除浮動(dòng)障涯，但切記不能使用visible值罐旗，如果使用這個(gè)值將無(wú)法達(dá)到清除浮動(dòng)效果膳汪。 優(yōu)點(diǎn)：簡(jiǎn)單，代碼少九秀，瀏覽器支持好 缺點(diǎn)：使用auto時(shí)內(nèi)部寬高超過父級(jí)div時(shí)遗嗽，會(huì)出現(xiàn)滾動(dòng)條，使用hidden時(shí)會(huì)被隱藏
三鼓蜒、after 方法 原理：利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊痹换，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法都弹，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽娇豫，而這種方法則是利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。下面來(lái)看看其具體的使用方法： <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>
.outer {zoom:1;} /==for IE6/7 Maxthon2==/ .outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;} 其中clear:both;指清除所有浮動(dòng)畅厢；content: ‘.’; display:block;對(duì)于FF/chrome/opera/IE8不能缺少冯痢，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它或详，但是不顯示出來(lái)系羞，這樣才能實(shí)現(xiàn)清除浮動(dòng)。 所以總的來(lái)說霸琴，推薦使用偽類的辦法椒振。
二十九：你最喜歡的圖片替換方法是什么，你如何選擇使用梧乘。
設(shè)計(jì)師能夠用一張背景圖像替代某元素中的原始文字澎迎，以期顯示出更美觀的字體。 實(shí)現(xiàn)方法 一：添加span標(biāo)簽 該技巧的實(shí)現(xiàn)非常簡(jiǎn)單：用span將元素中的文本包圍起來(lái)选调，然后通過應(yīng)用CSS樣式隱藏這個(gè)span中的文本夹供，最后將背景圖像應(yīng)用到該元素之上即可。例如仁堪，對(duì)于下面的這一段HTMl標(biāo)記哮洽。 二、負(fù)text-indent屬性值 設(shè)計(jì)師Mike Rundle提出了一種使用負(fù)text-indent屬性值的方法弦聂，將文本推到屏幕的左邊緣之外鸟辅。雖然該方案的適用性并不廣泛——IE 5.0會(huì)將背景圖片隨文本一起推出瀏覽者的視線范圍——但卻相當(dāng)簡(jiǎn)潔優(yōu)雅。 缺點(diǎn)：并沒有解決瀏覽器禁用圖像后空白頁(yè)面的可訪問性問題莺葫；有時(shí)在IE 5.0中無(wú)法使用匪凉。
意義：而圖像替換技術(shù)則保留了被替換元素中的原有文本，因此無(wú)論對(duì)何種客戶而言捺檬，理解頁(yè)面內(nèi)容都不成問題再层。主要是考慮SEO，而非視覺上的效果。
三十：你會(huì)如何解決特定瀏覽器的樣式問題聂受？
所謂的瀏覽器兼容性問題蒿秦，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁(yè)面顯示效果不統(tǒng)一的情況饺饭。在大多數(shù)情況下渤早，我們的需求是，無(wú)論用戶用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)瘫俊，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問題是前端開發(fā)人員經(jīng)常會(huì)碰到和必須要解決的問題悴灵。
在學(xué)習(xí)瀏覽器兼容性之前扛芽，我想把前端開發(fā)人員劃分為兩類：
第一類是精確按照設(shè)計(jì)圖開發(fā)的前端開發(fā)人員，可以說是精確到1px的积瞒，他們很容易就會(huì)發(fā)現(xiàn)設(shè)計(jì)圖的不足川尖，并且在很少的情況下會(huì)碰到瀏覽器的兼容性問題，而這些問題往往都死瀏覽器的bug茫孔，并且他們制作的頁(yè)面后期易維護(hù)叮喳，代碼重用問題少，可以說是比較牢固放心的代碼缰贝。
第二類是基本按照設(shè)計(jì)圖來(lái)開發(fā)的前端開發(fā)人員馍悟，很多細(xì)枝末節(jié)差距很大，不如間距剩晴，行高锣咒，圖片位置等等經(jīng)常會(huì)差幾px。某種效果的實(shí)現(xiàn)也是反復(fù)調(diào)試得到赞弥，具體為什么出現(xiàn)這種效果還模模糊糊毅整，整體布局十分脆弱。稍有改動(dòng)就亂七八糟绽左。代碼為什么這么寫還不知所以然悼嫉。這類開發(fā)人員往往經(jīng)常為兼容性問題所困。修改好了這個(gè)瀏覽器又亂了另一個(gè)瀏覽器拼窥。改來(lái)改去也毫無(wú)頭緒戏蔑。其實(shí)他們碰到的兼容性問題大部分不應(yīng)該歸咎于瀏覽器，而是他們的技術(shù)本身了闯团。
文章主要針對(duì)的是第一類辛臊，嚴(yán)謹(jǐn)型的開發(fā)人員，因此這里主要從瀏覽器解析差異的角度來(lái)分析兼容性問題房交。（相關(guān)文章推薦：主流瀏覽器CSS 3和HTML 5兼容清單）
瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽彻舰，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率:100%
解決方案：CSS里 {margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問題刃唤，幾乎所有的CSS文件開頭都會(huì)用通配符來(lái)設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0隔心。
瀏覽器兼容問題二：塊屬性標(biāo)簽float后，又有橫行的margin情況下尚胞，在IE6顯示margin比設(shè)置的大
問題癥狀:常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br>
碰到頻率：90%（稍微復(fù)雜點(diǎn)的頁(yè)面都會(huì)碰到硬霍，float布局最常見的瀏覽器兼容問題）
解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個(gè)典型的塊屬性標(biāo)簽笼裳，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的唯卖，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)，這就是一個(gè)必然會(huì)碰到的兼容性問題躬柬。
瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px）拜轨，在IE6，IE7允青，遨游中高度超出自己設(shè)置高度
問題癥狀：IE6橄碾、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度颠锉。
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里法牲。出現(xiàn)這個(gè)問題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的琼掠，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高拒垃。
瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽，設(shè)置display:block后采用float布局眉枕，又有橫行的margin的情況恶复，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block;后面加入display:inline;display:table;
備注：行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高速挑，我們需要設(shè)置display:block;(除了input標(biāo)簽比較特殊)谤牡。在用float布局并有橫向的margin后，在IE6下姥宝，他就具有了塊屬性float后的橫向margin的bug翅萤。不過因?yàn)樗旧砭褪切袃?nèi)屬性標(biāo)簽，所以我們?cè)偌由蟙isplay:inline的話腊满，它的高寬就不可設(shè)了套么。這時(shí)候我們還需要在display:inline后面加入display:talbe。
瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候碳蛋，有些瀏覽器會(huì)有默認(rèn)的間距胚泌，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽肃弟，所以只要不超出容器寬度玷室，img標(biāo)簽都會(huì)排在一行里零蓉，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道穷缤。（我的一個(gè)學(xué)生使用負(fù)margin敌蜂，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法津肛，所以我禁止他們使用）
瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性章喉，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備注：在B/S系統(tǒng)前端開時(shí)身坐，有很多情況下我們又這種需求秸脱。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px部蛇；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)撞反，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條搪花。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問題。
瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
做兼容頁(yè)面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容嘹害，當(dāng)然熟練到一定的程度就沒這么麻煩了撮竿。建議經(jīng)常會(huì)碰到兼容性問題的新手使用。很多兼容性問題都是因?yàn)闉g覽器對(duì)標(biāo)簽的默認(rèn)屬性解析不同造成的笔呀，只要我們稍加設(shè)置都能輕松地解決這些兼容問題幢踏。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話，就能很好的理解為什么會(huì)出現(xiàn)兼容問題以及怎么去解決這些兼容問題许师。
/* CSS hack/
我很少使用hacker的房蝉，可能是個(gè)人習(xí)慣吧，我不喜歡寫的代碼IE不兼容微渠，然后用hack來(lái)解決搭幻。不過hacker還是非常好用的。使用hacker我可以把瀏覽器分為3類：IE6 逞盆；IE7和遨游檀蹋；其他（IE8 chrome ff safari opera等）
◆IE6認(rèn)識(shí)的hacker 是下劃線_ 和星號(hào) *
◆IE7 遨游認(rèn)識(shí)的hacker是星號(hào) *
比如這樣一個(gè)CSS設(shè)置：
height:300px;height:200px;_height:100px;
IE6瀏覽器在讀到height:300px的時(shí)候會(huì)認(rèn)為高時(shí)300px；繼續(xù)往下讀云芦，他也認(rèn)識(shí)heihgt俯逾， 所以當(dāng)IE6讀到height:200px的時(shí)候會(huì)覆蓋掉前一條的相沖突設(shè)置，認(rèn)為高度是200px舅逸。繼續(xù)往下讀桌肴，IE6還認(rèn)識(shí)_height,所以他又會(huì)覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px琉历；
IE7和遨游也是一樣的從高度300px的設(shè)置往下讀坠七。當(dāng)它們讀到*height200px的時(shí)候就停下了水醋，因?yàn)樗鼈儾徽J(rèn)識(shí)_height。所以它們會(huì)把高度解析為200px灼捂，剩下的瀏覽器只認(rèn)識(shí)第一個(gè)height:300px;所以他們會(huì)把高度解析為300px离例。因?yàn)閮?yōu)先級(jí)相同且想沖突的屬性設(shè)置后一個(gè)會(huì)覆蓋掉前一個(gè)，所以書寫的次序是很重要的悉稠。
三十一：如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)宫蛆？
我們知道 js 可以通過 window.navigator.userAgent 來(lái)獲取瀏覽器的相關(guān)信息。因而通過userAgent來(lái)限制訪問是個(gè)不錯(cuò)的方法的猛。
三十二：有哪些的隱藏內(nèi)容的方法（如果同時(shí)還要保證屏幕閱讀器可用呢耀盗？）
1.display:none;的缺陷
搜索引擎可能認(rèn)為被隱藏的文字屬于垃圾信息而被忽略屏幕閱讀器（是為視覺上有障礙的人設(shè)計(jì)的讀取屏幕內(nèi)容的程序）會(huì)忽略被隱藏的文字，同時(shí)不利于搜索引擎卦尊。
- visibility: hidden ;的缺陷
這個(gè)大家應(yīng)該比較熟悉就是隱藏的內(nèi)容會(huì)占據(jù)他所應(yīng)該占據(jù)物理空間
3.overflow:hidden;一個(gè)比較合理的方法
.texthidden { display:block;/統(tǒng)一轉(zhuǎn)化為塊級(jí)元素/ overflow: hidden; width: 0; height: 0; }
就像上面的一段CSS所展示的方法叛拷，將寬度和高度設(shè)定為0，然后超過部分隱藏岂却，就會(huì)彌補(bǔ)上述一忿薇、二方法中的缺陷，也達(dá)到了隱藏內(nèi)容的目的躏哩。
三十三：你用過柵格系統(tǒng) (grid system) 嗎署浩？如果使用過，你最喜歡哪種扫尺？
Bootstrap中的流式布局筋栋；Bootstrap提供了兩種布局方式，固定式布局和流式布局（用em表示的叫做彈性布局正驻，用百分比表示的叫做流體布局）方式弊攘，Bootstrap的布局實(shí)際上是在柵格外加個(gè)容器(Container)，因此兩種布局方式的唯一區(qū)別是：固定布局加的是固定寬度(width)的容器姑曙，流式布局加的是自適應(yīng)(或叫可變)寬度的容器襟交。
三十四：你用過媒體查詢，或針對(duì)移動(dòng)端的布局/CSS 嗎渣磷？
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css婿着，適合相應(yīng)的設(shè)備顯示；即響應(yīng)式布局
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) { … }
三十五：你熟悉 SVG 樣式的書寫嗎醋界？
<svg>是繪制矢量圖形的HTML5的標(biāo)簽竟宋，它是用SVG 使用 XML 格式定義圖形的。
其定義格式為：
<?xml version="1.0" standalone="no"?>//XML標(biāo)準(zhǔn)文件頭形纺，從左到右依次表示：版本號(hào)是1.0丘侠，standalone
定義了外部定義DTD 文件的存在
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> //因?yàn)樯厦媸莕o
<svg viewBox = "0 0 1000 1000" version = "1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">//定義了版本和命名空間；xlink的命名空間逐样，里面包含了href屬性
<defs>
<!-- A circle of radius 200 -->
<circle id = "s1" cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
<!-- An ellipse (rx=200,ry=150) -->
<ellipse id = "s2" cx = "200" cy = "150" rx = "200" ry = "150" fill = "salmon" stroke = "black" stroke-width = "3"/>
</defs>//定義圖形
<use x = "100" y = "100" xlink:href = "#s1"/>
<use x = "100" y = "650" xlink:href = "#s2"/>//用此坐標(biāo)代替上邊的cx蜗字、cy坐標(biāo)
</svg>
三十六：如何優(yōu)化網(wǎng)頁(yè)的打印樣式打肝？
###################################################################################################################################################################
三十七：在書寫高效 CSS 時(shí)會(huì)有哪些問題需要考慮？
1.樣式是：瀏覽器是從右向左來(lái)解析一個(gè)選擇器的
2.ID最快挪捕，Universal最慢 有四種類型的key selector粗梭，解析速度由快到慢依次是：ID、class级零、tag和universal
3.不要tag-qualify （永遠(yuǎn)不要這樣做 ul#main-navigation { } ID已經(jīng)是唯一的断医，不需要Tag來(lái)標(biāo)識(shí)，這樣做會(huì)讓選擇器變慢奏纪。）
4.后代選擇器最糟糕（換句話說鉴嗤，下面這個(gè)選擇器是很低效的： html body ul li a { }）
5.想清楚你為什么這樣寫
6.CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀序调。但是這些神奇的選擇器會(huì)浪費(fèi)很多的瀏覽器資源醉锅。）
7.我們知道#ID速度是最快的，那么我們都用ID发绢，是不是很快硬耍。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性
注意：兩種新增的CSS3偽選擇器。
1边酒、UI元素狀態(tài)偽類
我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類默垄，這些主要是針對(duì)于HTML中的Form元素操作，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài)甚纲，前者為可寫狀態(tài)后者為不可狀態(tài);另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來(lái)看兩個(gè)實(shí)例朦前，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來(lái)介杆，你就可以這樣應(yīng)用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
這樣一來(lái)就把頁(yè)面中禁用的文本框應(yīng)用了一個(gè)不同的樣式。那么對(duì)于其他幾個(gè)用法是一樣的韭寸，這里就不在講述春哨。IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。
2恩伺、css3的:nth選擇器
這節(jié)內(nèi)容才是關(guān)鍵赴背，也是CSS3選擇器最新部分，有人也稱這種選擇器為CSS3結(jié)構(gòu)類晶渠，下面我們通過實(shí)際的應(yīng)用來(lái)具體了解他們的使用和區(qū)別凰荚，首先列出他具有的選擇方法：
:fist-child選擇某個(gè)元素的第一個(gè)子元素;
:last-child選擇某個(gè)元素的最后一個(gè)子元素;
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素;
:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算;
:nth-of-type()選擇指定的元素;
:nth-last-of-type()選擇指定的元素褒脯，從元素的最后一個(gè)開始計(jì)算;
:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素;
:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素;
only-child選擇的元素是它的父元素的唯一一個(gè)了元素;
only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素;
:empty選擇的元素里面沒有任何內(nèi)容便瑟。
這些偽選擇器屬于CSS3新增的，如果打擊向熟練掌握一定要熟練掌握其性能番川。
兩種新增的Css3偽選擇器到涂。
1脊框、UI元素狀態(tài)偽類
我們把":enabled",":disabled",":checked"偽類稱為UI元素狀態(tài)偽類，這些主要是針對(duì)于HTML中的Form元素操作践啄，最常見的比如我們"type="text"有enable和disabled兩種狀態(tài)浇雹，前者為可寫狀態(tài)后者為不可狀態(tài);另外"type="radio"和"type="checkbox""有"checked"和"unchecked"兩種狀態(tài)。來(lái)看兩個(gè)實(shí)例屿讽，比如說你想將"disabled"的文本框與別的文本框區(qū)別出來(lái)昭灵，你就可以這樣應(yīng)用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
這樣一來(lái)就把頁(yè)面中禁用的文本框應(yīng)用了一個(gè)不同的樣式。那么對(duì)于其他幾個(gè)用法是一樣的聂儒，這里就不在講述虎锚。IE6-8不支持":checked",":enabled",":disabled"這三種選擇器。
2衩婚、CSS3的:nth選擇器
這節(jié)內(nèi)容才是關(guān)鍵窜护，也是CSS3選擇器最新部分，有人也稱這種選擇器為CSS3結(jié)構(gòu)類非春，下面我們通過實(shí)際的應(yīng)用來(lái)具體了解他們的使用和區(qū)別柱徙，首先列出他具有的選擇方法：
:fist-child選擇某個(gè)元素的第一個(gè)子元素;
:last-child選擇某個(gè)元素的最后一個(gè)子元素;
:nth-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素;
:nth-last-child()選擇某個(gè)元素的一個(gè)或多個(gè)特定的子元素，從這個(gè)元素的最后一個(gè)子元素開始算;
:nth-of-type()選擇指定的元素;
:nth-last-of-type()選擇指定的元素奇昙，從元素的最后一個(gè)開始計(jì)算;
:first-of-type選擇一個(gè)上級(jí)元素下的第一個(gè)同類子元素;
:last-of-type選擇一個(gè)上級(jí)元素的最后一個(gè)同類子元素;
only-child選擇的元素是它的父元素的唯一一個(gè)了元素;
only-of-type選擇一個(gè)元素是它的上級(jí)元素的唯一一個(gè)相同類型的子元素;
:empty選擇的元素里面沒有任何內(nèi)容护侮。
這些偽選擇器屬于CSS3新增的，如果打擊向熟練掌握一定要熟練掌握其性能储耐。
結(jié)構(gòu)性偽類選擇器
- 四個(gè)最基本的：root羊初、not、empty什湘、target
- first-child长赞、last-child、nth-child闽撤、nth-last-child得哆、
nth-child(odd)、nth-child(even)哟旗、nth-last-child(odd)贩据、nth-last-child(even) - nth-of-type、nth-last-of-type
- 循環(huán)使用樣式
- only-child
三十八：使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些闸餐？
缺點(diǎn)：簡(jiǎn)單來(lái)說CSS預(yù)處理器語(yǔ)言較CSS玩法變得更高級(jí)了饱亮，但同時(shí)降低了自己對(duì)最終代碼的控制力。更致命的是提高了門檻舍沙，首先是上手門檻近尚，其次是維護(hù)門檻，再來(lái)是團(tuán)隊(duì)整體水平和規(guī)范的門檻场勤。這也造成了初學(xué)學(xué)習(xí)成本的昂貴戈锻。
優(yōu)點(diǎn)：用一種專門的編程語(yǔ)言歼跟，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件格遭，然后開發(fā)者就只要使用這種語(yǔ)言進(jìn)行編碼工作哈街。通俗的說，CSS預(yù)處理器用一種專門的編程語(yǔ)言拒迅，進(jìn)行Web頁(yè)面樣式設(shè)計(jì)骚秦，然后再編譯成正常的CSS文件，以供項(xiàng)目使用璧微。CSS預(yù)處理器為CSS增加一些編程的特性作箍，無(wú)需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量前硫、簡(jiǎn)單的邏輯程序胞得、函數(shù)等等在編程語(yǔ)言中的一些基本特性，可以讓你的CSS更加簡(jiǎn)潔屹电、適應(yīng)性更強(qiáng)阶剑、可讀性更佳，更易于代碼的維護(hù)等諸多好處危号。
三十九：如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體牧愁，你該如何去實(shí)現(xiàn)？
圖片
網(wǎng)絡(luò)字庫(kù)
四十：請(qǐng)解釋瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器外莲？
先產(chǎn)生一個(gè)元素集合猪半，然后從后往前判斷览芳；
瀏覽器先產(chǎn)生一個(gè)元素集合麻惶，這個(gè)集合往往由最后一個(gè)部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）斯入。然后向上匹配甸昏，如果不符合上一個(gè)部分，就把元素從集合中刪除崭添，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。
舉個(gè)例子翔忽，有選擇器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出來(lái)組成一個(gè)集合，然后上一層盏檐，對(duì)每一個(gè)集合中的元素歇式，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上胡野，從這個(gè)元素的父元素開始向上找材失，沒有找到一個(gè) tagName 為 body 且 class 中有 ready 的元素，就把原來(lái)的元素從集合中刪去硫豆。
至此這個(gè)選擇器匹配結(jié)束龙巨，所有還在集合中的元素滿足笼呆。大體就是這樣，不過瀏覽器還會(huì)有一些奇怪的優(yōu)化旨别。
注意：
1诗赌、為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。效率不必說秸弛，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便铭若。關(guān)于文檔流的解析方向，是因?yàn)楝F(xiàn)在的 CSS递览，一個(gè)元素只要確定了這個(gè)元素在文檔流之前出現(xiàn)過的所有元素叼屠，就能確定他的匹配情況；應(yīng)用在即使 html 沒有載入完成绞铃，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性镜雨。
2、為什么是用集合主要也還是效率憎兽±淅耄基于 CSS Rule 數(shù)量遠(yuǎn)遠(yuǎn)小于元素?cái)?shù)量的假設(shè)和索引的運(yùn)用，遍歷每一條 CSS Rule 通過集合篩選纯命，比遍歷每一個(gè)元素再遍歷每一條 Rule 匹配要快得多西剥。
四十一：請(qǐng)描述偽元素 (pseudo-elements) 及其用途
利用偽元素裝飾內(nèi)容 (無(wú)論是裝飾圖片還是音效) 而不需要更改 HTML 的內(nèi)容，從而幫助內(nèi)容與樣式更好地分離
:first-letter :first-line :after :before
HTML 標(biāo)簽的目的亿汞，就是為了展示內(nèi)容信息瞭空。非內(nèi)容信息要使用偽元素。具體的使用場(chǎng)景是圖標(biāo)和清除浮動(dòng)疗我。
偽類
偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)咆畏，或者說元素當(dāng)前所具有的特性，而不是元素的id吴裤、class旧找、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動(dòng)態(tài)變化的麦牺，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)钮蛛，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)剖膳，它又會(huì)失去這個(gè)樣式魏颓。由此可以看出，它的功能和class有些類似吱晒，但它是基于文檔之外的抽象甸饱，所以叫偽類。
偽元素
與偽類針對(duì)特殊狀態(tài)的元素不同的是，偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作叹话，它所操作的層次比偽類更深了一層偷遗，也因此它的動(dòng)態(tài)性比偽類要低得多。實(shí)際上渣刷，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）鹦肿、第一行，選取某些內(nèi)容前面或后面這種普通的選擇器無(wú)法完成的工作辅柴。它控制的內(nèi)容實(shí)際上和元素是相同的箩溃，但是它本身只是基于元素的抽象，并不存在于文檔中碌嘀，所以叫偽元素涣旨。
四十二：請(qǐng)解釋你對(duì)盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來(lái)渲染你的布局股冗。
盒模型包括margin霹陡、border、padding和content止状，W3C的標(biāo)準(zhǔn)是width和height就是content的寬和高烹棉，而IE默認(rèn)盒模型的width和height是包含了border、padding和content的怯疤。box-sizing：content-box（w3c標(biāo)準(zhǔn)盒模型）浆洗，border-box（IE類盒模型）。
四十三：請(qǐng)解釋 * { box-sizing: border-box; } 的作用, 并且說明使用它有什么好處集峦？
這就是將所有元素的border和padding算在width和height里了伏社，就變成了ie的盒模型了。
使用 * { box-sizing: border-box; }能夠統(tǒng)一IE和非IE瀏覽器之間的差異塔淤。
說到 IE 的 bug摘昌，在 IE6以前的版本中，IE對(duì)盒模型的解析出現(xiàn)一些問題高蜂，跟其它瀏覽器不同聪黎，將 border 與 padding 都包含在 width 之內(nèi)。
而另外一些瀏覽器則與它相反备恤，是不包括border和padding的稿饰。
對(duì)于IE瀏覽器，當(dāng)我們?cè)O(shè)置 box-sizing: content-box; 時(shí)烘跺，瀏覽器對(duì)盒模型的解釋遵從我們之前認(rèn)識(shí)到的 W3C 標(biāo)準(zhǔn)，當(dāng)它定義width和height時(shí)脂崔，它的寬度不包括border和padding滤淳；
對(duì)于非IE瀏覽器，當(dāng)我們?cè)O(shè)置box-sizing: border-box; 時(shí)砌左，瀏覽器對(duì)盒模型的解釋與 IE6之前的版本相同脖咐，當(dāng)它定義width和height時(shí)铺敌，border和padding則是被包含在寬高之內(nèi)的。
內(nèi)容的寬和高可以通過定義的“width”和 “height”減去相應(yīng)方向的“padding”和“border”的寬度得到屁擅。
內(nèi)容的寬和高必須保證不能為負(fù)偿凭，必要時(shí)將自動(dòng)增大該元素border box的尺寸以使其內(nèi)容的寬或高最小為0。
四十四：請(qǐng)羅列出你所知道的 display 屬性的全部值
none:不顯示 block：此元素將顯示為塊級(jí)元素派歌，此元素前后會(huì)帶有換行符 inline：默認(rèn)弯囊。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符胶果。 inline-block：行內(nèi)塊元素
list-item:此元素會(huì)作為列表顯示 run-in:此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示 table:此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>）匾嘱，表格前后帶有換行符
inline-table:此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒有換行符早抠。 table-row:此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）霎烙。
table-cell:此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） inherit:規(guī)定應(yīng)該從父元素繼承 display 屬性的值。
四十五：請(qǐng)解釋 inline 和 inline-block 的區(qū)別蕊连？
行內(nèi)元素和行內(nèi)塊級(jí)元素悬垃，最基本的區(qū)別就是inline元素不能設(shè)置寬高邊距，inline-block則可以甘苍，block是塊級(jí)元素是獨(dú)占一行的尝蠕，inline-block就是能放在一行的block。關(guān)于這個(gè)問題羊赵，低版本的ie是有bug的趟佃，通過再次設(shè)置display為inline可以解決。
div{
display:inline-block;
}
div{
display:inline;
}
四十六：請(qǐng)解釋 relative昧捷、fixed闲昭、absolute 和 static 元素的區(qū)別
relative相對(duì)于自己
fixed相對(duì)于瀏覽器
absolute相對(duì)于第一個(gè)非static的父級(jí)元素
static無(wú)定位
1、static（靜態(tài)定位）：默認(rèn)值靡挥。沒有定位序矩，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
2跋破、relative（相對(duì)定位）：生成相對(duì)定位的元素簸淀，通過top,bottom,left,right的設(shè)置相對(duì)于其正常（原先本身）位置進(jìn)行定位《痉担可通過z-index進(jìn)行層次分級(jí)租幕。無(wú)論父級(jí)存在不存在，無(wú)論有沒有TRBL拧簸，均是以父級(jí)的左上角進(jìn)行定位劲绪，但是父級(jí)的Padding屬性會(huì)對(duì)其影響
3、absolute（絕對(duì)定位）：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位贾富。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定歉眷。可通過z-index進(jìn)行層次分級(jí)颤枪。若想把一個(gè)定位屬性為absolute的元素定位于其父級(jí)元素內(nèi)汗捡，只有滿足兩個(gè)條件：第一：設(shè)定TRBL第二：父級(jí)設(shè)定Position屬性
4、fixed（固定定位）：生成絕對(duì)定位的元素畏纲，相對(duì)于瀏覽器窗口進(jìn)行定位扇住。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定』艚荆可通過z-index進(jìn)行層次分級(jí)台囱。
四十七：CSS 中字母 'C' 的意思是疊層 (Cascading)。請(qǐng)問在確定樣式的過程中優(yōu)先級(jí)是如何決定的 (請(qǐng)舉例)读整？如何有效使用此系統(tǒng)簿训？
采用權(quán)值相加的方式來(lái)適配權(quán)值最高的css，具體權(quán)值：標(biāo)簽里寫style(1000)米间，id選擇器(100)强品，class選擇器(10)，標(biāo)簽(1)屈糊，還有!important可以寫在任何地方的榛，而且優(yōu)先級(jí)是最高的。
四十八：你在開發(fā)或生產(chǎn)環(huán)境中使用過哪些 CSS 框架逻锐？你覺得應(yīng)該如何改善他們夫晌？
以前用過ligerui、easyui現(xiàn)在用的就是bootstrap了昧诱，這些雖然不是純css框架晓淀，我確實(shí)沒用過什么純css框架，也基本沒有去改善他們了盏档。
四十九：請(qǐng)問你有嘗試過 CSS Flexbox 或者 Grid 標(biāo)準(zhǔn)規(guī)格嗎凶掰？
Flex對(duì)于常見的橫縱布局很有用
五十：為什么響應(yīng)式設(shè)計(jì) (responsive design) 和自適應(yīng)設(shè)計(jì) (adaptive design) 不同？
都是對(duì)于不同分辨率頁(yè)面做出調(diào)整的設(shè)計(jì)蜈亩，響應(yīng)式是會(huì)根據(jù)不同分辨率出現(xiàn)不同布局的頁(yè)面懦窘，而自適應(yīng)的話是頁(yè)面總體布局不變，內(nèi)部樣式改變稚配，其實(shí)可以理解bootstrap里的傳統(tǒng)柵格布局和流式柵格布局吧畅涂？
響應(yīng)式的基本概念是：
簡(jiǎn)而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本道川。 ——來(lái)源（百度）
（采用 CSS 的 media query 技術(shù)午衰，配合流體布局（ fluid grids ）和同樣可以自適應(yīng)的圖片/視頻等資源素材苹丸。以上所說，都是通過 HTML 和 CSS 就能完成的苇经。一般來(lái)說，響應(yīng)式 傾向于只改變?cè)氐耐庥^布局宦言，而不大幅度改變內(nèi)容扇单。Jeffrey Zeldman 總結(jié)說，我們就把 自適應(yīng) 定義為一切能用來(lái)為各種分辨率和設(shè)備性能優(yōu)化視覺體驗(yàn)的技術(shù)吧奠旺。 ——來(lái)源（知乎上的回答）
自適應(yīng)的解釋：
Adaptive Design 是 Aaron Gustafson 的書的標(biāo)題蜘澜。他認(rèn)為 自適應(yīng) 在包括 響應(yīng)式 的 CSS media query 技術(shù)以外，也要用 Javascript 來(lái)操作 HTML 來(lái)更適應(yīng)移動(dòng)設(shè)備的能力响疚。自適應(yīng) 有可能會(huì)針對(duì)移動(dòng)端用戶減去內(nèi)容鄙信，減去功能。自適應(yīng) 可以在服務(wù)器端就進(jìn)行優(yōu)化忿晕，把優(yōu)化過的內(nèi)容送到終端上装诡。自適應(yīng) 通常會(huì)牽扯到另外一個(gè)詞 “progressive enhancement” 。
progressive enhancement：從針對(duì)最低端的践盼，最低分辨率的設(shè)備的設(shè)計(jì)做起鸦采，逐步逐步為更高階的設(shè)備增加功能和效果的做法。（換個(gè)角度說咕幻，也就是相當(dāng)于為移動(dòng)設(shè)備減去功能）
五十一：請(qǐng)問為何要使用 translate() 而非 absolute positioning渔伯，或反之的理由？為什么肄程？
使用 transform 或 position 實(shí)現(xiàn)動(dòng)畫效果時(shí)是有很大差別锣吼。
使用 transform 時(shí)，可以讓 GPU 參與運(yùn)算蓝厌，動(dòng)畫的 FPS 更高玄叠。
使用 position 時(shí)，最小的動(dòng)畫變化的單位是 1px褂始，而使用 transform 參與時(shí)诸典，可以做到更小（動(dòng)畫效果更加平滑）
功能都一樣崎苗。但是translate不會(huì)引起瀏覽器的重繪和重排狐粱，這就相當(dāng)nice了。
五十二：請(qǐng)解釋事件代理 (event delegation)胆数。
首先介紹一下JavaScript的事件代理肌蜻。事件代理在JS世界中一個(gè)非常有用也很有趣的功能。當(dāng)我們需要對(duì)很多元素添加事件的時(shí)候必尼，可以通過將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來(lái)觸發(fā)處理函數(shù)蒋搜。這主要得益于瀏覽器的事件冒泡機(jī)制
那些需要?jiǎng)?chuàng)建的以及駐留在內(nèi)存中的事件處理器少了篡撵。這是很重要的一點(diǎn)，這樣我們就提高了性能豆挽，并降低了崩潰的風(fēng)險(xiǎn)育谬。
在DOM更新后無(wú)須重新綁定事件處理器了。如果你的頁(yè)面是動(dòng)態(tài)生成的帮哈，比如說通過Ajax膛檀，你不再需要在元素被載入或者卸載的時(shí)候來(lái)添加或者刪除事件處理器了。
假設(shè)有一個(gè) UL 的父節(jié)點(diǎn)娘侍，包含了很多個(gè) Li 的子節(jié)點(diǎn)：
復(fù)制代碼
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
復(fù)制代碼
當(dāng)我們的鼠標(biāo)移到Li上的時(shí)候咖刃，需要獲取此Li的相關(guān)信息并飄出懸浮窗以顯示詳細(xì)信息，或者當(dāng)某個(gè)Li被點(diǎn)擊的時(shí)候需要觸發(fā)相應(yīng)的處理事件憾筏。我們通常的寫法嚎杨，是為每個(gè)Li都添加一些類似onMouseOver或者onClick之類的事件監(jiān)聽。
function addListeners4Li(liNode){
liNode.onclick = function clickHandler(){...};
liNode.onmouseover = function mouseOverHandler(){...}
}
window.onload = function(){
var ulNode = document.getElementById("parent-list");
var liNodes = ulNode.getElementByTagName("Li");
for(var i=0, l = liNodes.length; i < l; i++){
addListeners4Li(liNodes[i]);
}
}
如果這個(gè)UL中的Li子元素會(huì)頻繁地添加或者刪除氧腰，我們就需要在每次添加Li的時(shí)候都調(diào)用這個(gè)addListeners4Li方法來(lái)為每個(gè)Li節(jié)點(diǎn)添加事件處理函數(shù)枫浙。這就添加的復(fù)雜度和出錯(cuò)的可能性
更簡(jiǎn)單的方法是使用事件代理機(jī)制，當(dāng)事件被拋到更上層的父節(jié)點(diǎn)的時(shí)候古拴，我們通過檢查事件的目標(biāo)對(duì)象（target）來(lái)判斷并獲取事件源Li自脯。下面的代碼可以完成我們想要的效果：
// 獲取父節(jié)點(diǎn)，并為它添加一個(gè)click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
// 檢查事件源e.targe是否為L(zhǎng)i
if(e.target && e.target.nodeName.toUpperCase == "LI") {
// 真正的處理過程在這里
console.log("List item ",e.target.id.replace("post-")," was clicked!");
}
});
為父節(jié)點(diǎn)添加一個(gè)click事件斤富，當(dāng)子節(jié)點(diǎn)被點(diǎn)擊的時(shí)候膏潮，click事件會(huì)從子節(jié)點(diǎn)開始向上冒泡。父節(jié)點(diǎn)捕獲到事件之后满力，通過判斷e.target.nodeName來(lái)判斷是否為我們需要處理的節(jié)點(diǎn)焕参。并且通過e.target拿到了被點(diǎn)擊的Li節(jié)點(diǎn)。從而可以獲取到相應(yīng)的信息油额，并作處理叠纷。
通過上面的介紹，大家應(yīng)該能夠體會(huì)到使用事件委托對(duì)于web應(yīng)用程序帶來(lái)的幾個(gè)優(yōu)點(diǎn)：
1.管理的函數(shù)變少了潦嘶。不需要為每個(gè)元素都添加監(jiān)聽函數(shù)涩嚣。對(duì)于同一個(gè)父節(jié)點(diǎn)下面類似的子元素，可以通過委托給父元素的監(jiān)聽函數(shù)來(lái)處理事件掂僵。
2.可以方便地動(dòng)態(tài)添加和修改元素航厚，不需要因?yàn)樵氐母膭?dòng)而修改事件綁定。
3.JavaScript和DOM節(jié)點(diǎn)之間的關(guān)聯(lián)變少了锰蓬，這樣也就減少了因循環(huán)引用而帶來(lái)的內(nèi)存泄漏發(fā)生的概率幔睬。
