前端筆試面試題之三（2015美的前端筆試）

前端筆試面試系列之三----2015美的前端筆試

• @author: 周丹
• @email: [e-mail]
• @datetime: 2016/08/31
• 題目如有侵權行為,請聯系刪除;
• 答案僅供參考,如有不同意見,歡迎留言討論;
• 轉載請注明出處

題目部分

1. 寫出所有瀏覽器兼容display:inline-block的hack
2. li:nth-child(2n+1)代表什么意思?
3. 寫出position的所有值和意義
4. 寫出box-sizing的所有屬性值和意義
5. 點擊鏈接，alert當前鏈接的序號
6. 寫一個函數，給數組去重

---

答案部分

1. inline-block指同時擁有內聯元素（顯示在一行）和塊元素（可以設置寬高）的特性。
   hack指兼容ie的方法,具體有以下三種方法 

   /*方法1*/
   div {display:inline-block;}   /*觸發塊元素*/
   div {display:inline;}         /*使得塊元素呈遞為內聯對象*/
   /* 兩個display需先后放在兩個CSS聲明 */
   
   /*方法2*/
   div {
       display:inline;  /*設置為內聯元素*/
       zoom:1;     /*觸發塊元素的layout*/
   }
   
   /*方法3*/
   div{
       display:inline-block;
       *display:inline; /*觸發ie的layout*/
       *zoom:1
   }

2. 父元素下的子元素中序號為基數的元素
3. • static: position的默認值，對象遵循文檔流，top、bottom、left、right等屬性不會被應用。
   • relative: 對象遵循文檔流，但將依據top,bottom,left,right屬性在文檔流中偏移位置，其層疊通過z-index定義。
   • absolute: 對象脫離文檔流，依據top、bottom、left、right屬性相對於其含有position屬性為relative或absolute的父元素（若沒有則不斷向上查找，直到body為止）中進行定位，其層疊通過z-index定義。
   • fixed:對象脫離文檔流，其依據top、bottom、left、right屬性相對於瀏覽器窗口進行定位，即便出現滾動條，對象也不會隨着滾動而位置變化，層疊關系通過z-index定義。
4. 有3個屬性值,分別如下

   a. content-box：默認，w3c標准盒模型。
       外盒：元素空間尺寸 = width/height（內容高度/寬度）+ padding + border + margin
       內盒：元素大小 = width/height(內容高度/寬度) + padding + border + margin
   b. border-box ：IE盒模型。
       外盒：元素空間尺寸 = width/height(內容高度/寬度 + padding + border) + margin
       內盒：元素大小 = width/height（內容高度/寬度 + padding + border)
       可以用來避免增加padding大小的時候，內容撐出.
   c. inherit 繼承父元素的盒模型

5. 使用閉包

   var add_click_handler = function(nodes){       //注意函數的抽象
       var i;
       for(i=0;i< nodes.length;i++){
           nodes[i].onclick = function(i){      //定義一個函數立即傳遞i進去執行，而不是把一個函數賦值給onclick。該函數將返回一個事件處理器函數，事件處理器函數被賦值給onclick。該事件處理器綁定的是傳遞進去的i的值，而不是定義在add_click_handler中的值。
               return function(e){
                   alert(i);
               }
           }(i);
       }
   }
   var links = document.getElementsByTagName("a");
   add_click_handler(lniks);

6. 有以下兩個方法

   //方法1：刪除后數組長度會變化，手動令j-1。
   var removeRepeat = function(array){
       for(var i=0;i< array.length;i++){
           for(var j=0;j< array.length;j++){
               if(array[i]==array[j]){
                   array.splice(i,1);
                   j--;
               }
           }
       }
       return array;
   }
   var array=[2,3,1,2,4,3,3,4,6];
   removeRepeat(array);
   
   //方法2：刪除后數組長度會變化，所以初始值為長度，判斷條件為>0
   var removeRepeat2 = function(array){
       for(var i=0; i< array.length; i++){
           for(var j=array.length; j>i; j--){
               array.splice(i,1);
           }
       }
   }