前端笔试面试题之三（2015美的前端笔试）

最新推荐文章于 2024-04-24 23:01:09 发布

转载最新推荐文章于 2024-04-24 23:01:09 发布 · 561 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sharonzd/p/5819342.html

文章标签：

#面试 #前端 #ViewUI

本文详细解答了美的2015年前端笔试题，包括inline-block兼容性hack、CSS选择器含义、position及box-sizing属性解释，并提供了点击链接弹窗序号及数组去重的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端笔试面试系列之三----2015美的前端笔试

@author: 周丹
@email: sharon_zd@qq.com
@datetime: 2016/08/31
题目如有侵权行为,请联系删除;
答案仅供参考,如有不同意见,欢迎留言讨论;
转载请注明出处

题目部分

写出所有浏览器兼容display:inline-block的hack
li:nth-child(2n+1)代表什么意思?
写出position的所有值和意义
写出box-sizing的所有属性值和意义
点击链接，alert当前链接的序号
写一个函数，给数组去重

答案部分

inline-block指同时拥有内联元素（显示在一行）和块元素（可以设置宽高）的特性。
hack指兼容ie的方法,具体有以下三种方法

 1 /*方法1*/
 2 div {display:inline-block;}   /*触发块元素*/
 3 div {display:inline;}         /*使得块元素呈递为内联对象*/
 4 /* 两个display需先后放在两个CSS声明 */
 5 
 6 /*方法2*/
 7 div {
 8     display:inline;  /*设置为内联元素*/
 9     zoom:1;     /*触发块元素的layout*/
10 }
11 
12 /*方法3*/
13 div{
14     display:inline-block;
15     *display:inline; /*触发ie的layout*/
16     *zoom:1
17 }

父元素下的子元素中序号为基数的元素
- 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定义。

有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 继承父元素的盒模型

使用闭包

 1 var add_click_handler = function(nodes){       //注意函数的抽象
 2     var i;
 3     for(i=0;i< nodes.length;i++){
 4         nodes[i].onclick = function(i){      //定义一个函数立即传递i进去执行，而不是把一个函数赋值给onclick。该函数将返回一个事件处理器函数，事件处理器函数被赋值给onclick。该事件处理器绑定的是传递进去的i的值，而不是定义在add_click_handler中的值。
 5             return function(e){
 6                 alert(i);
 7             }
 8         }(i);
 9     }
10 }
11 var links = document.getElementsByTagName("a");
12 add_click_handler(lniks);

有以下两个方法

 1 //方法1：删除后数组长度会变化，手动令j-1。
 2 var removeRepeat = function(array){
 3     for(var i=0;i< array.length;i++){
 4         for(var j=0;j< array.length;j++){
 5             if(array[i]==array[j]){
 6                 array.splice(i,1);
 7                 j--;
 8             }
 9         }
10     }
11     return array;
12 }
13 var array=[2,3,1,2,4,3,3,4,6];
14 removeRepeat(array);
15 
16 //方法2：删除后数组长度会变化，所以初始值为长度，判断条件为>0
17 var removeRepeat2 = function(array){
18     for(var i=0; i< array.length; i++){
19         for(var j=array.length; j>i; j--){
20             array.splice(i,1);
21         }
22     }
23 }