前言
連續學了兩天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′)和(′.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;'>未命名.gif
簡答
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: 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′)和(′.class′)和('div.class') 在 IE 8 下哪個效率更高
這個涉及到jquery的優化問題了，我們知道jquery選擇器是由右向左找尋的
以上是先找尋class的标簽，然後在class标簽裡面找尋隻有div的标簽，會找兩次，應該是後面的高
PS：這道題我了解有問題，下來還有再研究一下
HTML5标簽
abd，我寫部落格時候都用到過，就隻有c沒有，沒法了隻能選他了。
布局題
未命名.gif
這個題比較簡單，是很常見的兩列布局，我們一直不推薦使用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>
具體實作時候一定要上機調試。
結語
今天我們又做了一道題，感覺難度不大，最後兩道題屬于開放型問題，我這裡就不作答了，有興趣他朋友可以留言。
若是您有好的題目，請留下再走
本文轉自葉小钗部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/p/3163657.html，如需轉載請自行聯系原作者
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)