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

一、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

标记IE6IE7IE8FFOperaSarari
[*+><]XXXX
_XXXXX
\9XXX
\0XXXX
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}}XXXXX
.bb , x:-moz-any-link, x:defaultXX√(ff3.5及以下)XX
@-moz-document url-prefix(){.bb{}}XXXXX
@media all and (min-width: 0px){.bb {}}XXX
* +html .bb {}XXXXX
游览器内核TridentTridentTridentGeckoPrestoWebKit

 

 

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");
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值