前言
連續學了兩天javascript的東西了，我們都累了，於是今天還是上一套面試題吧，大家一起休息休息，也為下個星期可能會有的面試准備下。
題目一覽
CSS
1. overflow-x 屬於 CSS2 還是 CSS3
2. 請列舉幾種可以清除浮動的方法（至少兩種）
3. display:none 和 visibility:hidden 的區別是什么
4. 請縮寫以下代碼：
.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
5. 如何讓一段文本中的所有英文單詞的首字母大寫
Javascript
1. 請解釋一下什么是閉包
2. call 和 apply 的區別是什么
3. 如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）
4. jQuery 中 $('.class') 和 $('div.class') 在 IE 8 下哪個效率更高，請解釋原因
HTML
1. 以下哪個不是 HTML5 的新標簽：
a. <article>
b. <section>
c. <address>
d. <time>
2. 正確使用 HTML 和 CSS 實現以下效果（中間方框部分表示圖片，右側為文字列表。盡量不要
使用 float 屬性）：
<ignore_js_op style='font: 14px/21px "Microsoft YaHei", Tahoma, sans-serif; color: rgb(68, 68, 68); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke-width: 0px;'>
簡答
1. jumei.com 和 weibo.com 完整載入后，html 代碼各有多少 KB
2. 最近關注了哪些前端相關的技術/博客/論壇，簡述心得和看法
既然題目都搞來了，我們就認認真真的做下吧！
overflow-x 屬於 CSS2 還是 CSS3
我在vs2010上面打到overflow的時候是沒有overflow-x的提示，所以果斷認為他是CSS3的屬性，這個屬性是用於控制橫向滾動條的。
雖說是CSS3提出的屬性，但是各個瀏覽器基本都支持了，所以可以認為是一個標准
visible：
不剪切內容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切為包含對象的window或frame的大小。並且clip屬性設置將失效
auto：
此為body對象和textarea的默認值。在需要時剪切內容並添加滾動條
hidden：
不顯示超過對象尺寸的內容
scroll：
橫向顯示滾動條
列舉幾種可以清除浮動的方法（至少兩種）
我們前面就說了，說清除浮動不太合理，因為float: none用於表示清楚浮動比較合理，所以我們這里可以改稱其為閉合浮動。
float會破壞行內框inline boxes導致line boxes高度坍塌，所以我們需要閉合浮動，解決其引起的坍塌
閉合浮動只有兩種方法：
① 添加新標簽並為其設置clear: both
② 為父元素設置overflow觸發器BFC，強制包裹浮動元素
我們在網上看到的所以方式都是以上的變形，我們理解以上即可，另外提一提其它的。
最經典的就是我們的clearfix了
1 .clearfix:after { 2 content: "."; 3 display: block; 4 height: 0; 5 visibility: hidden; 6 clear: both; 7 } 8 9 .clearfix { 10 *zoom: 1; 11 }
他這個說白了也是增加新標簽的一種變形。
display:none 和 visibility:hidden 的區別
這兩個家伙區別很大，他們都可以用於隱藏一個元素，但是不同的是：
display的方式將使元素脫離文檔流，這種做法可能引起頁面reflow，對性能不是很好，所以可以避免就避免吧。
visibility的方式隱藏了元素，但是他的空間還在。
簡寫CSS
.box {
background-position: 10px 20px;
background-repeat: no-repeat;
background-attachment: fixed;
background-color: red;
background-image: url(box.png);
}
.box { background: red url(box.png) no-repeat 10pz 20px fixed }
這個題出10個我都不怕。。。
讓一段文本中的所有英文單詞的首字母大寫
這個題我不會，但是應該是CSS3里面一個新特性，最后查詢了資料：
css的text-transform：none(默認值) | capitalize | uppercase | lowercase |
他可以干我們要的事情
什么是閉包
這個題基本是必問的，我們既然要作答，就好好答吧！
閉包實現原理
當某個函數調用時會創建一個執行環境以及作用域鏈，然后根據arguments和其它命名參數初始化形成活動對象。
在外部函數調用結束后，其執行環境與作用域鏈被銷毀，但是其活動對象保存在了閉包之中，最后在閉包函數調用結束后才銷毀
閉包的實現
在函數中定義函數，並且內部函數引用了外部函數的變量，最后內部函數被返回
閉包的作用
我們的函數可產生類似於塊級作用域的東西，內部的變量外部不可訪問，但是我們需要提供訪問的接口，這個接口的實現便依賴於我們的閉包
閉包的問題
閉包的使用上需要注意，因為他會增大內存的負擔，對性能有一點影響，另外閉包有可能會有一些容易出錯的場景。
以上便是我對閉包的理解（若是此處要裝B應該怎么做呢？）
call 和 apply 的區別是什么
call與apply是函數都具有的一個方式，其作用是可以改變其this的指向，其調用方式有所不同。
call傳遞參數，apply以數組形式傳遞與arguments是一對好基友，建議使用。
深度克隆一個對象
昨天才干了這個事情，深度克隆要使用到遞歸的思想：
1 function cloneObj(obj) { 2 var o = obj.constructor == Array ? [] : {}; //首先處理變量，看看是數組還是對象啦 3 for (var k in obj) { 4 //我們知道for in 會將原型的東西也給遍歷出來，所以我們這里需要做一個判斷 5 if (obj.hasOwnProperty(k)) { 6 //遞歸方式處理 7 o[k] = typeof obj[k] === 'objext' ? cloneObj(obj[k]) : obj[k]; 8 } 9 } 10 return o; 11 } 12 13 var a = { a: 'aaa', b: 'bbb', c: { d: 'ddd', e: [1, 2, 4]} }; 14 var b = cloneObj(a); 15 var s = '';
jQuery 中 $('.class') 和 $('div.class') 在 IE 8 下哪個效率更高
這個涉及到jquery的優化問題了，我們知道jquery選擇器是由右向左找尋的
以上是先找尋class的標簽，然后在class標簽里面找尋只有div的標簽，會找兩次，應該是后面的高
PS：這道題我理解有問題，下來還有再研究一下
HTML5標簽
1. 以下哪個不是 HTML5 的新標簽：
a. <article>
b. <section>
c. <address>
d. <time>
abd，我寫博客時候都用到過，就只有c沒有，沒法了只能選他了。
布局題
這個題比較簡單，是很常見的兩列布局，我們一直不推薦使用float，所以用inline-block實現吧：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style> 5 .box { border: 1px solid black; width: 360px; height: 180px; } 6 .box img { height: 160px; margin-left: 10px; } 7 .box ul { display: inline-block; *display: inline; zoom: 1; vertical-align: 15px; } 8 </style> 9 </head> 10 <body> 11 <div class="box"> 12 <img src="1.png" alt="葉小釵" /> 13 <ul> 14 <li><a href="#">刀狂劍痴葉小釵</a></li> 15 <li><a href="#">刀狂劍痴葉小釵</a></li> 16 <li><a href="#">刀狂劍痴葉小釵</a></li> 17 <li><a href="#">刀狂劍痴葉小釵</a></li> 18 <li><a href="#">刀狂劍痴葉小釵</a></li> 19 <li><a href="#">刀狂劍痴葉小釵</a></li> 20 <li><a href="#">刀狂劍痴葉小釵</a></li> 21 <li><a href="#">刀狂劍痴葉小釵</a></li> 22 </ul> 23 </div> 24 </body> 25 </html>
具體實現時候一定要上機調試。
結語
今天我們又做了一道題，感覺難度不大，最后兩道題屬於開放型問題，我這里就不作答了，有興趣他朋友可以留言。
若是您有好的題目，請留下再走