程序员面试助手:web前端开发面试题及答案_极悦注册
专注Java教育14年 全国咨询/投诉热线:444-1124-454
极悦LOGO图
始于2009,口口相传的Java黄埔军校
首页 学习攻略 职业指南 程序员面试助手:web前端开发面试题及答案

程序员面试助手:web前端开发面试题及答案

更新时间:2022-12-28 14:59:46 来源:极悦 浏览978次

今天小编收集了一些关于web前端开发面试题及答案的一些相关内容,通过对知识点的整理与经验的总结,重新巩固了一些前端基础的知识,希望可以帮助到大家:

web前端开发面试题及答案

1. 一个200*200的div在不同分辨率屏幕上下左右居中,用css实现

<div style="width:500px;height:500px;border:1px solid green;display:flex;justify-content:center;align-items:center;">
  <div style="">
    上下左右居中
  </div>
</div>

2. 写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式:

<div id="left">我是左边</div>
    <div id="center">我是中间</div>
    <div id="right">我是右边</div>
 
html,body{ margin: 0px;width: 100%; } 
#left,#right{width: 200px;height: 200px;background-color: aqua;
    position: absolute;}
    #left{left: 0;top:0;}
    #right{right: 0;top:0;}
    #center{margin: 0 200px;background-color: blue;height: 200px;}
或者利用弹性盒子

    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        html,
        body {
            height: 100%;
        }
 
        body {
            display: flex;
        }
 
        .left {
            width: 100px;
            background-color: rgb(199, 170, 223);
        }
 
        .center {
            background-color: rgb(151, 228, 148);
            flex: 1;
        }
 
        .right {
            width: 100px;
            background-color: rgb(199, 170, 223);
 
 
        }
    </style>
 
<body>
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>
</body>

3. 阐述清楚浮动的几种方式(常见问题)

1.父级div定义 height

原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。

优点:简单、代码少、容易掌握

缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

2.父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度

优点:简单、代码少、浏览器支持好

4. 结尾处加空div标签 clear:both

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

优点:简单、代码少、浏览器支持好、不容易出现怪问题

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

5. 解释css sprites ,如何使用?

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片

6. 如何用原生js给一个按钮绑定两个onclick事件?

Var  btn=document.getElementById(‘btn’);

//事件监听 绑定多个事件

var btn4 = document.getElementById("btn4");

btn4.addEventListener("click",hello1);

btn4.addEventListener("click",hello2);

function hello1(){

 alert("hello 1");

}

function hello2(){

 alert("hello 2");

}

7. 拖拽会用到哪些事件

dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

  • dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
  • dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
  • dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
  • drag:拖拽期间在被拖拽元素上连续触发
  • drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
  • dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

以上就是“程序员面试助手:web前端开发面试题及答案”,你能回答上来吗?如果想要了解更多的相关内容,可以关注极悦Java官网。 

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>