web前端面试题及答案5篇

web前端面试题及答案5篇

web前端面试题及答案(1)

WEB前端面试题（考试时间：60分钟）

你好，欢迎你参加蓝朗集团面试。我们衷心地祝愿你通过考核！期待你加入具有“拼搏、创新、诚信、激情、高效、敬业”精神的蓝朗集团！蓝朗愿为你开启职业生涯的新篇章，期待与你一起辛勤耕耘，共同收获成功喜悦！

第一部分（技能知识）

//注:所有JS题目均使用原生态JS,不允许使用框架

1.如下两个div元素垂直距离是多少？

2.编写css让div2在div1的右下角？

3.怎么样让一个已知宽高的div元素水平居中？

4.以下的div背景是什么颜色的？

.a{background-color:#FF0000;}

.b{background-color:#00FF00;}

5.用css给如下按钮设置背景图片bg.jpg，并隐藏按钮上的文字？

6.如何用CSS控制背景图片定位,不滚动(当背景图片小于容器大小)

7.将如下字符串转变成json对象

varstr="{a:1,b:2,c:true,d:"hello"}";

8.在如下数组第二个元素后插入一个元素3

varar=[1,2,4,5,6];

9.请根据每个元素的i属性，由小到大，排序如下数组

varar=[{i:5,v:1},{i:2,v:4},{i:3,v:2},{i:1,v:5},{i:4,v:3}];

10.以空格字符串作为分隔字符串，将如下字符串拆分成数组（每个元素不能含有空格字符）

varstr="a b c 20 d e f g 123";

11.请将如下数据库表的记录用json表示出来

id name city

--------------------------

1 Tom London

2 John Newyork

3 Alice Paris

12.编写代码让f1继承f2的所有成员

function f1(){

this.a1=1;

this.b1=2;

}

function f2(){

this.a2=3;

this.b2=4;

}

13.把16进制颜色转变成rgb颜色，如:#FFFFFF等同rgb(255,255,255)

第二部分

1. 最近一个月阅读的书籍？

2. 从上一家公司的工作感悟是什么？

第三部分

1. 你认为做为前端人员应该具备的素质和条件是哪些？

2.请简述你的个人价值观及职业规划。

web前端面试题及答案(2)

一.修改以下css样式，简述您的理由：

1. div.container{

2. width:500px;

3. background-image:url(/img/sprite.png);

4. background-repeat:no-repeat;background-position:0px -50px;

5. }

6. div.container ul#news-list, div.container ul#news-list li{

7. margin:0px;

8. padding:0px;

9. }

10. div.container ul#news-list li{

11. padding-left:20px;

12. background-image:url(/img/sprite.png);

13. background-repeat:no-repeat;

14. background-position:-100px 0px;

15. }

16. a{

17. font-size:14px;

18. font-weight:bold;

19. line-height:150%;

20. color:#000000;

21. }

复制代码

二.使用一个JSON对象，描述下面一句话：
     小明22岁，来自杭州，爱好看电影和旅游。小明有两个姐姐，一个叫小红，25岁，是一名经理。另一个叫小兰，23岁，是一名数学老师。


三.为本地数组编写一个原型，实现将数组中具有相同元素的元素删除（意思是只保留一个），并返回删除后的数组。


四.

1.

复制代码

(1) 说说上面一行语句的优缺点。
(2) 编写一个通用的事件注册函数，看下面的代码：

1. function addEvent(element,type,handle){//在这里编写您的代码

2.

3. }

复制代码

五. 写出下图所示 html 内容，要求：遵循 xhtml1.0 规范，符合 web 语义。

 

web前端面试题及答案(3)

 JavaScript/HTML/CSS

1．怎样使用JavaScript写div或span

2．div和span有什么区别？

3．JavaScript中对象没有定义就使用，会出现什么问题？返回JavaScript中的什么类型?

4．JavaScript中有几种数据类型？分别是什么？

5．JavaScript中有trim函数吗？如果没有如何给String类型加入trim函数？

6．JavaScript中prototype关键字有什么作用？

7．JavaScript中有继承的概念吗？

8．你遇到浏览器兼容性问题吗？举个列子？

9．JavaScript中获取HTML元素有几种方式？

10．JavaScript总isNan是什么意思？

11．JavaScript程序如何调试？

12．你使用过正则表达式吗？使用正则表达式都做什么？正则表单是在JavaScript中可 以使用，在Java中可以使用吗？其他语言可以使用吗？

13．在HTML中readOnly和Disabled有什么共同点和不同点？

14．什么是 JS 事件冒泡

 AJAX

1．Ajax核心对象叫什么名字？

2．Ajax和Java有关吗？

3．Ajax运行在什么地方？

4．Ajax有几个状态？

5．Ajax有什么优点？

6．Ajax使用的时候需要注意些什么？

7．你们项目中都用Ajax做过什么？

8．什么是异步？什么是同步？

9．什么是callback机制？

HTML、CSS部分

要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3技术等

Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2.行内元素有哪些？块级元素有哪些？

（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

3.CSS的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了 border 和 pading;（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

4.link 和@import 的区别是?

（1）、link属于XHTML标签，而@import完全是CSS提供的一种方式; （2）、页面被加载的时候，link-会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）、import只有在IE5以上的才能识别，而link是XHTML标签，无兼容问题; （4）、link方式的样式的权重 高于@import的权重.

5.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ em和px有什么关系？

* ID 和 Class; * Class 可继承、 font-size font-family color, 列表 UL LI DL DD DT 可继承; * 不可继承 ：border padding margin width height ; * 优先级就近原则，样式定义最近者为准; * 载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag important 比 内联优先级高 如果父元素定义字体大小12px，子元素定义1em，大小就是12px。

三、如何让2个并列的div自动等高（不设高度）
注：如果能写出3种常见方法固然最好，但最好写一下各自优缺点，否则面试时肯定会问你为什么这样

写

1、背景模拟法（假高度），按照尺寸制作背景，平铺，当内容增多时，背景就会向下纵向重复，看起

来就向左右两个div都自动向下延伸了一样。

2、表格嵌套法（不难理解，表格都是等高的，就是在div中嵌套表格）

3、内外补丁法（最推荐的方法，因为只用css实现的，但初学者不易理解）
* { margin:0; padding:0; }
#wrap {
overflow:hidden; (这行代码是重点，否则你会看到页面很长很长)
padding:0;
padding-left:180px;（内补丁）
}
#left,#right {
height:auto;
margin-bottom:-10000px;（外补丁）
padding-bottom:10000px;（内补丁）
}
#left {
display:inline;
float:left;
width:180px;
margin-left:-180px;（外补丁）
background: #0CF;
}
#right{
float:right;
width:100%;
background: #FC6;
}

这里说一下内外补丁，其实也没那么难理解，我的理解就是相互抵消。多用用margin负值，你会了解这

个原理的。

6.如何居中div,如何居中一个浮动元素?

给div设置一个宽度，然后添加margin:0 auto属性

div{ width:200px; margin:0 auto; }

设置容器的浮动方式为相对定位 确定容器的宽高 宽500 高 300 的层 设置层的外边距

.Div { Width:500px ; height:300px; Margin: -150px 0 0 -250px; position: absolute; left:50%; top:50%; }

7.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，hack 的技巧 ？

* IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto； * png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。 * 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px; //这种情况之下IE会产生20px的距离，这时需要设置display:inline; //使浮动忽略} * 渐进识别的方式，从总体中逐渐排除局部。 * 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 ```css .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } ``` * IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. * IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * （条件注释）缺点是在IE浏览器下可能会增加额外的>

web前端面试题及答案(4)

1Doctype作用？严格模式与混杂模式如何区分？它们有何意义?

HTML5 为什么只需要写 ？

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

页面导入样式时，使用link和@import有什么区别？

介绍一下你对浏览器内核的理解？

常见的浏览器内核有哪些？

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

简述一下你对HTML语义化的理解？

HTML5的离线储存怎么使用，工作原理能不能解释一下？

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

iframe有那些缺点？

Label的作用是什么？是怎么用的？（加 for 或 包裹）

HTML5的form如何关闭自动完成功能？

如何实现浏览器内多个标签页之间的通信? (阿里)

webSocket如何兼容低浏览器？(阿里)

页面可见性（Page Visibility）API 可以有哪些用途？

如何在页面上实现一个圆形的可点击区域？

实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

网页验证码是干嘛的，是为了解决什么安全问题？

tite与h1的区别、b与strong的区别、i与em的区别？

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS选择符有哪些？哪些属性可以继承？

CSS优先级算法如何计算？

CSS3新增伪类有那些？

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

display有哪些值？说明他们的作用。

position的值relative和absolute定位原点是？

CSS3有哪些新特性？

请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

用纯CSS创建一个三角形的原理是什么？

一个满屏 品 字布局 如何设计?

常见兼容性问题？

li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

为什么要初始化CSS样式。

absolute的containing block计算方式跟正常流有什么不同？

CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范(块级格式化上下文：block formatting context)的理解？

CSS权重优先级是如何计算的？

请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

移动端的布局用过媒体查询吗？

使用 CSS 预处理器吗？喜欢那个？

CSS优化、提高性能的方法有哪些？

浏览器是怎样解析CSS选择器的？

在网页中的应该使用奇数还是偶数的字体？为什么呢？

margin和padding分别适合什么场景使用？

抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

元素竖向的百分比设定是相对于容器的高度吗？

全屏滚动的原理是什么？用到了CSS的那些属性？

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。

如何修改chrome记住密码后自动填充表单的黄色背景 ？

你对line-height是如何理解的？

设置元素浮动后，该元素的display值是多少？（自动变成display:block）

怎么让Chrome支持小于12px 的文字？

让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）

font-style属性可以让它赋值为“oblique” oblique是什么意思？

position:fixed;在android下无效怎么处理？

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

display:inline-block 什么时候会显示间隙？(携程)

overflow: scroll时不能平滑滚动的问题怎么处理？

有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

style标签写在body后与body前有什么区别？

介绍JavaScript的基本数据类型。

说说写JavaScript的基本规范？

JavaScript原型，原型链 ? 有什么特点？

JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？

Javascript如何实现继承？

Javascript创建对象的几种方式？

Javascript作用链域?

谈谈This对象的理解。

eval是做什么的？

什么是window对象? 什么是document对象?

null，undefined的区别？

写一个通用的事件侦听器函数(机试题)。

["1", "2", "3"].map(parseInt) 答案是多少？

关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

什么是闭包（closure），为什么要用它？

javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

如何判断一个对象是否属于某个类？

new操作符具体干了什么呢?

用原生JavaScript的实现过什么功能吗？

Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

对JSON的了解？

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1

web前端面试题及答案(5)

web前端面试题

1. js的中的"=", "==", "===" 的区别

- "="：赋值

- "==": 相等运算符，判断是否相等

- "===": 严格运算符,判断数值及类型是否相等

2. js中数组循环处理的方法有那些，及其区别

方法：

- map(),forEeach()

区别：

map(): 循环遍历数组中的每一项,但返回新的数组

forEach(): 循环遍历数组中的每一项,但没有返回值

3. 如何解决发布版本，前端缓存的问题

- 了解面试者项目的构建工具的使用

4. 最近使用的技术框架及其组件有那些

- 了解面试者使用react的熟练程序

5. 前后端分离，你是如何模拟业务数据

- 根据策划稿或原型稿，与后端定义API接口。

- 使用mockjs模拟API接口的输入，输出

6. 谈谈你如何定位前端的性能问题，及优化。

定位性能问题：

- 工具：chrome的开发工具等

- 查看请求次数及响应时间

- 查看浏览器渲染页面完成最大时间

优化：

- 资源（css,js,image等）合并与压缩减少请求数

- 缓存策略

- 图片资源懒加载

- gzip压缩

7. 你遇到过比较难的技术问题是？你是如何解决的？

- 了解面试者遇到问题的思路及其逻辑

8. 当你非常忙碌的时候，你如何继续完成任务？

- 了解面试者为了按时完成任务而用那些帮助自己规划好自己的时间并保持专注的技巧。

web前端面试题及答案5篇

https://m.czhuihao.cn/zhongkao/158815/