今日前端工程师面试中的问题

一、css中position有几种，分别是什么？

absolute、relative、fixed、static

1、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

2、relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

3、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

4、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

 

二、Div居中的几种方式？

 

1、
div#container {
margin-left: auto;
margin-right: auto;
width: 168px;
}

2、
body{
text-align:center;
}

3、
body { text-align:center; } 
#wrap { text-align:left; 
margin:0 auto; 
}

4、
div{display: inline-block;}
div {display:inline;}

 

三、div并排同行显示

 

1、适合div和ul等其他element
div {float:left;}

2、适合div和ul等其他element
div {display: inline;}

 

 

四、js定义一个class

 

1、
function Cat() {
  this.name = "大毛";
}

var cat1 = new Cat();
alert(cat1.name); // 大毛

2、
Cat.prototype.makeSound = function(){
    alert("喵喵喵");
}

3、
var Cat = {
　　name: "大毛",
　　makeSound: function(){ alert("喵喵喵"); }
};

var cat1 = Object.create(Cat);
alert(cat1.name); // 大毛
cat1.makeSound(); // 喵喵喵

4、
var Cat = {
　　createNew: function(){
　　var cat = {};
　　cat.name = "大毛";
　　cat.makeSound = function(){ alert("喵喵喵"); };
　　return cat;
　}
};

var cat1 = Cat.createNew();
cat1.makeSound(); // 喵喵喵

 

 

五、js闭包作用

 

function f1(){
　　　　n=999;
            // 定义一个闭包
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
}
var result=f1();
result(); // 999

闭包就是能够读取其他函数内部变量的函数。

 

闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

 

六、jQuery链表原理及实现

如果我们这样写$('#id').find('.className')，那程序只这样执行 的，第一次init的时候执行一步getElementById，就return了，接着执行 find('.className',divDocument)，divDocument就是我们第一次选择的是div标签，如果document下有很 多dom对象的时候，这次只遍历divDocument是不是少了很多次，而且在第一次选择id的速度也要比遍历快的多。

 

七、bootstrap三角形的绘制

.dropdown-menu::before {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #CCC;
position: absolute;
top: -7px;
left: 9px;
}
.dropdown-menu::after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
position: absolute;
top: -6px;
left: 9px;
}

 

八、Css的hack

标记 IE6 IE7 IE8 FF Opera Sarari

[*+><]	√	√	X	X	X	X
_	√	X	X	X	X	X
\9	√	√	√	X	X	X
\0	X	X	√	X	√	X
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}	X	X	X	X	X	√
.bb , x:-moz-any-link, x:default	X	√	X	√(ff3.5及以下)	X	X
@-moz-document url-prefix(){.bb{}}	X	X	X	√	X	X
@media all and (min-width: 0px){.bb {}}	X	X	X	√	√	√
* +html .bb {}	X	√	X	X	X	X
游览器内核	Trident	Trident	Trident	Gecko	Presto	WebKit

 

 

div{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

@-moz-document url-prefix(){div{background-color:#00ff00;}}/* 仅firefox 识别 */ 

* +html div{background-color:#a200ff;}/* 仅IE7 识别 */

@media screen and (-webkit-min-device-pixel-ratio:0){div{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */

@media all and (min-width: 0px){ div{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{} 

 

 

 

九、css伪类选择器

http://www.w3school.com.cn/cssref/css_selectors.asp

 

十、css多元素的组合选择器

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
E>F	子元素选择器，匹配所有E元素的儿子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签	3

 

十一、js==或===的区别

1. ==会把比较的二者进行类型转换：
如：0 == false; // true, 会把0转成bool值进行比较
    1 == true; // true, 同样把1转成bool值再和true进行比较
2. ===是不会把比较的二者进行类型转换，是string就是string，是number就是number
如： 0 === false; // false, 因为0是number，false是boolean，两者就肯定不相等
     1 === true; // false

 

 

十二、js对象非空判断

var exp = null;
if (!exp && typeof(exp)!="undefined" && exp!=0)
{
    alert("is null");
}