web前端笔试题总结

em和rem的区别：

　　浏览器的默认字体高度是16px，1em=16px；大小可以自己设置调整，并且默认集成父级容器中文本的大小。

　　rem是CSS3中新增的属性，默认情况下是文本尺寸的大小，不同的是它集成根节点的大小，如果要改变，只需在根节点处设置，即可全局改变。

 

js的内置对象：

　　String；Math；Array；Date；Event；Global；正则表达式对象；

 

position四个属性值的区别：

　　static：默认情况下是static，即正常的文档流；

　　fixed：依据浏览器的窗口进行定位，当滑动页面的时候位置固定不变；

　　relative：相对元素本身的位置进行偏移.

　　absolute:当父级容器设置了position为relative或absolute，那么元素相对父级容器进行定位，并且会忽略父级容器的padding，从padding的左上角，和border紧挨着进行定位。

 

用纯CSS3实现div的上下左右居中：

div{
    　　position: relative;
    　　top: 50%;
    　　left: 50%;
    　　transform: translate(-50%,-50%);
　　}

 

书写高效CSS需要注意的问题：

1：布局遵循从全局到局部，从左到右，从上到下。

2：class，id命名尽量简短且通俗易懂。

3：提取公共样式，提高代码的复用率。

4：开始要CSS样式的初始化。（由于不同浏览器的默认样式有所不同，为了统一显示）

5：大项目要考虑三层架构。

 

提高网页加载速度的方法：

1：优化网页图片文件。（JPG是全彩色图片，占用的空间比较大；GIF支持动图，尺寸小，但是颜色范围窄；PNG比GIF的颜色范围大）

2：图片使用height和width属性。（这样浏览器在加载图片之前就会预留出位置，待加载完成之后直接显示，否则在加载完成之后还要重新处理一次布局样式）

3：CSS文件压缩瘦身，删除多余样式，空格等，可以使用工具来压缩CSS文件。

4:目录地址后加上斜杠。（减少服务器分析地址的时间）

5：整合CSS,js文件减少HTTP请求次数。可以将不同的样式表合成一个文件，可以使用sprites将多张小图片整合到一张大图片上。

 

怎样判断一个值是不是NaN：

可以用isNaN()函数：

 

function ifNaN(value){
         if(isNaN(value)){
             return true;
         }else{
             return false;
         }
     }

 

返回true则是NaN，否则不是NaN

 

sum(2,3)=>5

sum(2)(3)=>5

请写出sum函数的具体实现:

 

function sum(a){
         if(arguments.length==2){
             return arguments[0]+arguments[1];
         }
         if(arguments.length==1){
             return function (b){
                return a+b;
             }
         }
     }

 

 

用prototype实现一个简单的继承例子:

 

function baseClass(){
         this.show=function(){
             alert("baseClass");
         }
     }
     function extendClass(){}

     extendClass.prototype=new baseClass();
     var instance=new extendClass();
     instance.show();

 

 

 

 

用函数计算出从1到n一个有几个0:

 

function numberOf0(){
         var a=0;
         for(var i=1;i<=n;i++){
             var str=new String(i);
             for(var j=0;j< str.length;j++){
                 if(str[j]=="0"){
                     a++;
                 }
             }
         }
         alert(a);
     }