聚美優品前端筆試題， 主要包括 html 、 css 以及 javascript 的知識點，個別涉及到 html5 標簽的考查。下面是問題的列表，來自w3cfuns的一套 前端筆試題 ，然后針對每個問題談談我的理解，有興趣的童鞋也可以做一下，然后大家交流交流。 注：每個問題可能會涉及一些基于該問題衍生出的知識點，由于本人初涉前端不久，理解上會有一些偏差和錯誤，歡迎指出，以致修正。
CSS
1.??overflow-x??屬于 CSS2 還是 CSS3
css3，可以查找css參考手冊，附上 最新版的css手冊
?
2.??請列舉幾種可以清除浮動的方法（至少兩種）
先來說說 浮動的原理 和 清除浮動的原因 ：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于(或脫離了)文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響行內元素(如span、a、em)的排列，即行內元素浮動后就會表現得像塊級元素一樣。當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（或者可以稱為“高度塌陷”現象）。在實際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
清除浮動方法：
（1）
添加額外(空)標簽
通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>
優點：通俗易懂，容易掌握；
缺點：增加無意義的標簽，有違結構與表現的分離。
（2）
父元素設置 overflow：hidden
通過設置父元素overflow值為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；
優點：不存在結構和語義化問題，代碼量極少；
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
（3）
父元素也設置浮動
優點：不存在結構和語義化問題，代碼量極少;
缺點：使得與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用。
（4）
給父元素添加clearfix類
由于IE6-7不支持:after，使用 zoom:1觸發 hasLayout。
優點：結構和語義化完全正確,代碼量居中;
缺點：復用方式不當會造成代碼量增加。
clearfix類 代碼如下：
//:after會在元素內容——而不是元素后面插入一個偽素，該規則只添加了一個清除的包含句點作為非浮動元素，注意，:after不是偽類，而是偽元素
.clearfix:after
{
content
:
"."
;
display
:
block
;
height
:
0
;
visibility
:
hidden
;
clear
:
both
;
}
// 觸發IE6、7下的haslayout
.clearfix
{
*zoom
:
1
;
}
?
3.??display:none??和??visibility:hidden??的區別是什么
相同點：display:none與visibility:hidden都可以用來隱藏某個元素；
不同點：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);
}
這個沒什么好說的，只要是使用過css背景屬性的人都知道縮寫形式，另外需一提的是color屬性可放在最前面也可以放在最后面。
.box
{
background
:
red url(box.png) no-repeat 10px 20px fixed
;
}
?
5.??如何讓一段文本中的所有英文單詞的首字母大寫
css的 text-transform ：none(默認值) | capitalize | uppercase | lowercase |? full-width(css3新增)；
取值方面可查看手冊，具體是什么就不多說了。
Javascript
1.??請解釋一下什么是閉包
對于閉包，相信每個人都有自己的見解，并且網上一大推關于閉包的概念，我的理解是 能夠訪問到其包含(外部)函數內部變量的函數。
主要有兩個 特性 ：
一個是可以讀取其包含函數內部的變量；另一個就是讓這些變量的值始終保持在內存中。
使用閉包的
注意點
：
過多使用會造成
內存泄露
的現象，因為閉包會引用其包含函數
作用域
的
變量對象
，使得即使包含函數執行完畢后，其作用域的變量對象不會被銷毀，即其占用的內存無法得到回收，直至閉包執行完畢后才會被銷毀。所以不能濫用閉包，否則會造成網頁的
性能問題
，在IE中可能導致內存泄露。解決方法是，在退出函數之前，將不使用的局部變量全部刪除。對于
作用域(或者成為執行環境)、作用域鏈、變量對象
的概念，大家可參考
javascript高級程序設計的第四章節
，關于變量、作用域、內存的分析。這就是為什么說理解閉包前首先要理解js中作用域從產生到銷毀過程發生的一系列有趣的事情。
?
2.??call 和 apply 的區別是什么
相同點：都可以在特定作用域(環境)下調用函數；
不同點：傳遞的 參數形式 不同，call方法的參數必須一個個列舉出來，而apply方法的參數是以一個數組的形式進行傳遞，也支持arguments參數。
?
3.??如何使用原生 Javascript 代碼深度克隆一個對象（注意區分對象類型）
對于 深度克隆 ，我的理解是：在克隆或擴展一個對象時，當該對象是一個包括子對象的對象，也會遍歷該子對象的屬性并進行復制拷貝。所以深度克隆適用于對象的屬性也是對象的情況。
貼出js代碼：
/*
*
* 深度擴展對象--適用于對象的屬性也是對象的情況
* @param {Object}
* @return {Object}
*/
var deepextend = function (destination, source)
{
for (var property in source) {
var copy = source[property]; // 獲取source屬性值
if (destination === copy) {
continue;
}
// 如果copy是一個對象，則遞歸調用(并傳入copy參數)，直到copy不是一個對象為止
if (typeof copy === 'object')
{
//$.isObj(copy)
destination[property] = arguments.callee(destination[property] || {
}
, copy); //遞歸調用
// 否則直接把copy賦值給destination對象的屬性(此時與$.extend方法等價)
} else
{
destination[property] = copy;
}
}
return destination;
};
例子測試 ：
var
destination =
{
name:
"hcy"
,
age:
22
,
info: {sex:
"man", job: "student"
}
};
var
source =
{
name:
"hc"
,
age:
23
,
info: {sex:
"woman", job: "developer"
}
};
console.log(deepextend(destination, source));
//
輸出destination的全部屬性
for
(
var
i
in
destination) {
if
(
typeof
destination[i] === "object"
) {
for
(
var
j
in
destination[i]) {
console.log(destination[i]
+ ":\t" +
destination[i][j]);
}
}
else
{
console.log(i
+ ":\t" +
destination[i]);
}
}
firebug下測試結果截圖 ：
?
4.??jQuery 中??$('.class')??和??$('div.class')??在 IE 8 下哪個效率更高，請解釋原因
這題是關于selector的 性能問題 ，$(".class")在查找和遍歷頁面的元素時，會遍歷所有帶有class類的元素，不管是div、p、span或者是其他元素；而$("div.class")首先會查找出div元素，然后在所有的div中查詢帶有class類的相關div，所以在效率方面，當然是div.class選擇器高于.class。這是我個人的理解，相關標準的方案求大神解答。
HTML
1.??以下哪個不是 HTML5 的新標簽：
a.??<article>
b.??<section>
c.??<address>
d.??<time>
address 不是html5新增的標簽，而是在 HTML4.01中就已經存在了，用于 可定義一個地址或者 文檔作者或擁有者的聯系信息。而 article、section、time 標簽是html5新增的 語義化標簽，具體代表啥含義，咋用法就不多說了，可查看官方文檔或一些html5技術論壇的相關說明。
?
2.??正確使用 HTML 和 CSS 實現以下效果（中間方框部分表示圖片，右側為文字列表。盡量不要
使用 float 屬性）：
這題比較簡單，只要學過css的相信都不大問題。對于該圖片和文字的布局，可使用 定位 來解決。外層容器 相對定位 ，里面的圖片和文字列表 絕對定位 ，就可以實現上圖的效果了。貼出代碼：
html結構：
<
div
class
="wrap"
>
<
img
src
="images/love.jpg"
alt
="愛的呼喚"
width
="200"
height
="200"
/>
<
ul
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
<
li
><
a
href
="#"
>
只要人人都獻出一點愛，世界將變成美好人間
</
a
></
li
>
</
ul
>
</
div
>
css代碼：
body, div, ul, li
{
margin
:
0
;
padding
:
0
;}
body
{
font
:
12px/1.6 Arial,Helvetica,sans-serif
;}
ul
{
list-style-type
:
none
;}
a
{
text-decoration
:
none
;
color
:
#999
;}
a:hover
{
text-decoration
:
underline
;
color
:
#666
;}
.wrap
{
margin
:
30px auto
;
width
:
520px
;
height
:
250px
;
border
:
1px solid #ccc
;
position
:
relative
;
/*
這是關鍵
*/
}
.wrap img
{
border
:
1px dashed red
;
position
:
absolute
;
/*
這是關鍵
*/
left
:
20px
;
top
:
20px
;
}
.wrap ul
{
position
:
absolute
;
/*
這是關鍵
*/
right
:
20px
;
top
:
20px
;
}
.wrap ul li a
{
display
:
block
;
height
:
25px
;
line-height
:
25px
;
}
例子結果截圖：
?
最后還有兩道簡答題：
簡答
1.??jumei.com 和 weibo.com 完整載入后，html 代碼各有多少 KB
2.??最近關注了哪些前端相關的技術/博客/論壇，簡述心得和看法
對于第一題計算頁面全部元素加載完畢后，html代碼的大小。這個問題之前沒有遇到過，所以求大神貼出解決方案？？？
對于第二題，每個人都有不同的答案，對于自己，最近在忙于找實習，接觸了不久之前就比較流行的瀑布流，了解了一些js MVC框架，如 backbone、angular、ember ，然后也是之前不久開通的這個博客園的博客，希望記錄自己的一些成長經歷和學習的點點滴滴，之前也關注過 淘寶的UED、騰訊的Alloy Team ，平時閑著的時候會逛逛 w3cfuns、blueidea、伯樂在線、html5中國 等一些技術論壇，也會在豆瓣和知乎發現和了解一些話題。這就是我最近做的一些事情，相信也是我以后一直堅持下去的事情。。。。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
