前端笔试面试题之一

前端面试题1

最近翻看笔记本，发现内容过于繁冗，所以将一些内容陆陆续续的整理并分享出来，部分引用的资料为网络资源，如有侵权请联系我删除。

首先是前端面试题系列。（转眼距离自己去年找工作已经过去一年了，现在回头看这些题目心里感慨万千呐。）

1. 用css实现如下布局

C

 

A

     

B

     

2. 鼠标划过元素的时候,元素被放大,其他元素保持不动

A

     

B

     

C

 

3.如果页面出现问题,你会怎么办?

---

答案仅供参考

1.遵循内容优先原则，主要部分放在前面,优先加载。

<div id="third">C</div>    
<div id="first">A</div>  
<div id="second">B</div>

方法1:使用float

#container{
    font-size:0;/*避免float造成的错位。类似于处理inline-block造成的像素差*/
    width: 310px;
}
/* 注意封装：提取共同的css样式 */
#first,.second,.third {
    font-size: 20px;
    background: #CCCCCC;
}
#first {
    width: 100px;
    height: 100px
}
#second {
    margin-top: 10px;
    width: 100px;
    height: 100px
}
#third {
    float: right;
    width: 200px;
    height: 210px
}

方法2：绝对定位

#container{
    font-size: 0;
    position: relative;
    height: 210px;
}
#first,#second,#third {
    font-size: 20px;
    background: #CCCCCC;
}
#first{
    width: 100px;
    height: 100px;
    position: absolute;
}
#second{
    width: 100px;
    height: 100px;
    top:110px;
    position: absolute;
}
#third{
    left:110px;
    width: 200px;
    height: 210px;
    position: absolute;
}

2. 使用JavaScript进行交互

function zoom(id,x,y){
    var obj=document.getElementById(id); // 获取元素对象
    var dW=obj.clientWidth; // 获取元素宽度
    var dH=obj.clientHeight; // 获取元素高度
    obj.onmouseover=function(){ // 鼠标移入事件
        this.style.width=dW*x+"px"; // 横向缩放
        this.style.height=dH*y+"px"; // 纵向缩放
        this.style.backgroundColor="#87CEEB"; // 设置移入颜色
        this.style.zIndex=1; // 设置优先级
    };
    obj.onmouseout=function(){ // 鼠标移出事件
        this.style.width="";  //空引号，即表示设置回默认值
        this.style.height="";
        this.style.padding="";
        this.style.backgroundColor="";
        this.style.zIndex="";
    }
}
zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);

如果想要得到高分的话可以考虑封装、复用得更细致(自行发挥)；注意命名的语义性； 注意写注释

3. 页面无法访问的原因：

1. 检查浏览器是否可以正常上网。
2. 检查网页无法访问时的错误编号。根据代码的不同选择不同的解决方案。
    1. 404表示页面不存在
        a. 可以查看页面是否正确的发布到服务器上面了
        b. 检查是否页面地址输入错了。
    2. 5xx表示服务器错误
        a. 找后台技术人员，检查服务器是否可访问，是否出现故障。
3. 如果只是未加载出来，可能是JS代码没有放在页面的后面，加载速度慢尚未显示出来。
4. 查看页面的源代码，看看有没有什么问题