最新前端面试题
摘要：公司面试前端必问面试题，比如:百度，腾讯，淘宝等等都会问这些试题
一. css面试题
1. 什么是盒子模型？
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性
2. Doctype的几种类型？
是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 3. 如何布局左不动右边自适应的两列布局？
3. 如何布局两列等高？
HTML Markup
CSS Code
5. 如何布局右侧定宽，左侧或中间自适应？
6. 如何布局三列自适应？
7. gif,png,jpg的区别？
GIF图形交换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。
便携式网络图片（Portable Network Graphics），简称PNG，是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的，允许使用类似于GIF格式的调色板技术，支持真彩色图像，并具备Alpha（半透明）等特性。现在有很多人使用PNG格式于互联网及其他方面上。
JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩（lossy compression），意即在压缩过程中图像的品质会遭受到可见的破坏。
8. 什么是css sprite
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
10. 制作细线表格？
1、介绍了一个不常用属性：border-collapse:collapse;
2、使用了一个属性缩写技巧：border:style color;border-width:上 右 下 左;
11. position:relative,absolute,fixed区别与联系？ position:static是默认的属性。
absolute：尽量不要使用left:px。。right:px等属性。尽量使用margin-left:多少px;这样不容易错位。
fixed：是固定死的。无论你浏览器上下如何滚动，距离浏览器器的具体都不会改变的。
relative：相对定位。
以下是demo1:
层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
为 改变参照物（橘色框）后的效果层级关系为：<div — position:relative;最近的祖先定位元素，参照物<div—-没有设置为定位元素，不是参照物<div—-没有设置为定位元素，不是参照物<div box1<div box2 –position:absolute; top:50px; left:120px;<div box3效果图：
参 照物为最顶级的元素情况。层级关系为：<div ——没有设置为定位元素，不是参照物<div-没有设置为定位元素，不是参照物<div—— -没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
12. 如何居中一个float:left的元素
.p{ position:relative; float:left; left:50%; }
13. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验； 一些hack：
二. Js面试题
1). 基础：
1. parseInt 与 parseFloat 的区别？
Integer.parseInt 是一个方法，从String类型转成int数值
Float.parseFloat 是一个方法， 从String 类型转成float数值
2. valueof 与 toString 的区别？
总结：valueOf偏向于运算，toString偏向于显示。
1、 在进行对象转换时（例如:alert(a)）,将优先调用toString方法，如若没有重写toString将调用valueOf方法，如果两方法都不没有重写，但按Object的toString输出。
2、 在进行强转字符串类型时将优先调用toString方法，强转为数字时优先调用valueOf。
3、 在有运算操作符的情况下，valueOf的优先级高于toString。
3. 全等与相等？
全等是相似的一种,很特殊的一种,它的对应边得比恰好是1:1.两个全等的东西,一定是相似的,但是两个形似的东西,不一定是全等的.
4. break 与 continue 的区别？
break是结束整个循环体，continue是结束单次循环
5. js的作用域？
js没有作用域
只有变量有
全局变量和局部变量
6. Array 的 slice 与 splice 的区别？
1. join()方法：join()方法的用途是连接字符串值，join()方法只有一个参数，即数组项之间使用的字符串
如：
var aColors = ["red","green","blue"];
alert(aCloors.join(“-”));//output “red-green-blue”
2.concat()方法：将参数附加到数组末尾，返回新的数组，concat()方法只有一个参数，即要加的项
如：
var aColors = ["red","green","blue"];
var aColors2 = aColors.concat(“yellow”,”purple”);
alert(aColors);//output “red,green,blue”
alert(aColors2);//output “red,green,blue,yellow,purple”
3.slice()方法：接收1个或2个参数，即要提取的项的起始位置和结束位置，如果只有一个参数该方法返回从该位置开始到数组结尾的所有项，如果有2个参数该方法返回第一个位置和第二个位置的所有项，不包括第二个位置的项
如：
var aCloros = ["red","green","blue","yellow","purple"];
var aCloros2 = aCloros.slice(1);
var aCloros3 = aCloros.slice(1,4);
alert(aCloros2);//output “green,blue,yellow,purple”
alert(aCloros3);//output “green,blue,yellow”
4.shift()方法：将删除数组中的第一个项，将其作为函数值返回
5.unshift()方法：把一个项放在数组的第一个位置，然后把余下的项下移一个位置
6.push()方法：在数组的结尾添加一个或多个项
7.pop()方法：删除最后一个数组项，将其作为函数值返回
8.splice()方法：把数据项插入数组中部，调用该方法时传入的参数不同作用不同
删除：传入2个参数，这2个参数是: 要删除的第一个项的位置和要删除的项的个数
替换而不删除：传入3个参数，这3个参数是：起始位置，0(要删除的个数)，要插入的项
替换并删除：传入3个参数，这3个参数是：起始位置，要删除的数组项个数，要插入的项
8. 正则中test 与 match 的区别？
test是RegExp的方法，参数是字符串，返回值是boolean类型。
match是String的方法，参数是正则表达式，返回值是数组。
9. 如何在js中创建一个对象并继承他？
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person, //强制声明构造函数，默认是Object
sayName : function() {
alert(this.name);
}
}
var Person1 = new Person("king");
10. 什么是prototype ? 什么是原型链？
通过new运算符创建的对象，构造函数.prototype的值就是该对象的原型对象。
var now = new Date();
如上代码，now对象的原型对象就是Date.prototype。
通过new 一个对象就可以调用里面的公开的方法，属性。
11. setTimeout 与 setInterval 的区别？
13. cssText是什么,cssText 怎么用？
cssText 的本质就是设置 HTML 元素的 style 属性值。
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
14. offsetWidth, scrollLeft, scrollHeight? scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度 <font color="#ffffff">内容来自17jquery</font>
15. IE的事件与w3c事件的区别？
w3c事件流:
从根文档(html)开始遍历所有子节点，如果目标事件的父节点设置为捕获时触发，则执行该事件，直到目标被执行，然后再事件冒泡(设置为捕获时触发的事件不再被执行)。
ie事件流:
从目标事件被执行，然后再冒泡父节点的事件，直到根文档。
2). 前端高级面试题
1. 除了jQuery以外，请写出你所知道的js框架，试说出不同框架的特点；
2. 对于Javascript中OOP的理念，你认为在项目开发中有没有必要，什么样的项目适合前端OOP，请谈谈你的看法；
3. 在Javascript开发中，关于性能优化，分享一下你相关的经验？
4. 对于模块开发你是怎么看的？
5. 对于Javascript MVC开发你是怎么看的？分享一下你了解的相关信息？
6. AJAX是什么? AJAX跨域的解决办法?
1. 什么是盒子模型？
内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性
2. Doctype的几种类型？
是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 3. 如何布局左不动右边自适应的两列布局？
3. 如何布局两列等高？
HTML Markup
代码
<div id="left">Left sidebar</div> <div id="content">Main Content</div>
css代码
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>
css代码
#content{width:710px;background:#E4E4E4;margin:10px 0px;float:right;height:400px;}
#left{width:240px;background:#E4E4E4;margin:10px 0px;float:left;height:400px;}
css代码
#content{width:460px; background:#E4E4E4; margin:10px 0px 10px 10px; height:400px; float:left;}
#left{width:240px; background:#E4E4E4; margin:10px 0px; float:left; height:400px;}
#right{width:240px;background:#E4E4E4; margin:10px 0px; float:right; height:400px; }
GIF图形交换格式是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档，采用LZW压缩算法进行编码，有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。
便携式网络图片（Portable Network Graphics），简称PNG，是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的，允许使用类似于GIF格式的调色板技术，支持真彩色图像，并具备Alpha（半透明）等特性。现在有很多人使用PNG格式于互联网及其他方面上。
JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩（lossy compression），意即在压缩过程中图像的品质会遭受到可见的破坏。
8. 什么是css sprite
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
10. 制作细线表格？
1、介绍了一个不常用属性：border-collapse:collapse;
2、使用了一个属性缩写技巧：border:style color;border-width:上 右 下 左;
11. position:relative,absolute,fixed区别与联系？ position:static是默认的属性。
absolute：尽量不要使用left:px。。right:px等属性。尽量使用margin-left:多少px;这样不容易错位。
fixed：是固定死的。无论你浏览器上下如何滚动，距离浏览器器的具体都不会改变的。
relative：相对定位。
以下是demo1:
层级关系为：<div ——————————— position:relative; 不是最近的祖先定位元素，不是参照物<div—————————-没有设置为定位元素，不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
为 改变参照物（橘色框）后的效果层级关系为：<div — position:relative;最近的祖先定位元素，参照物<div—-没有设置为定位元素，不是参照物<div—-没有设置为定位元素，不是参照物<div box1<div box2 –position:absolute; top:50px; left:120px;<div box3效果图：
参 照物为最顶级的元素情况。层级关系为：<div ——没有设置为定位元素，不是参照物<div-没有设置为定位元素，不是参照物<div—— -没有设置为定位元素，不是参照物<div box1<div box2 ——–position:absolute; top:50px; left:120px;<div box3效果图：
12. 如何居中一个float:left的元素
.p{ position:relative; float:left; left:50%; }
13. Css在各浏览器下的兼容问题你通常是怎么来解决的，请分享你的经验； 一些hack：
css代码
#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */
*+html .list1 li{line-height:18px} //IE7hack
/* Firefox 1 - 2 */
body:empty #firefox12
{display: block;}
/* Firefox */
@-moz-document url-prefix()
{#firefox { display: block; }}
/* Webkit-Safari-Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
color:red
}
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body #opera { display: block; }}
二. Js面试题
1). 基础：
1. parseInt 与 parseFloat 的区别？
Integer.parseInt 是一个方法，从String类型转成int数值
Float.parseFloat 是一个方法， 从String 类型转成float数值
2. valueof 与 toString 的区别？
总结：valueOf偏向于运算，toString偏向于显示。
1、 在进行对象转换时（例如:alert(a)）,将优先调用toString方法，如若没有重写toString将调用valueOf方法，如果两方法都不没有重写，但按Object的toString输出。
2、 在进行强转字符串类型时将优先调用toString方法，强转为数字时优先调用valueOf。
3、 在有运算操作符的情况下，valueOf的优先级高于toString。
3. 全等与相等？
全等是相似的一种,很特殊的一种,它的对应边得比恰好是1:1.两个全等的东西,一定是相似的,但是两个形似的东西,不一定是全等的.
4. break 与 continue 的区别？
break是结束整个循环体，continue是结束单次循环
5. js的作用域？
js没有作用域
只有变量有
全局变量和局部变量
6. Array 的 slice 与 splice 的区别？
1. join()方法：join()方法的用途是连接字符串值，join()方法只有一个参数，即数组项之间使用的字符串
如：
var aColors = ["red","green","blue"];
alert(aCloors.join(“-”));//output “red-green-blue”
2.concat()方法：将参数附加到数组末尾，返回新的数组，concat()方法只有一个参数，即要加的项
如：
var aColors = ["red","green","blue"];
var aColors2 = aColors.concat(“yellow”,”purple”);
alert(aColors);//output “red,green,blue”
alert(aColors2);//output “red,green,blue,yellow,purple”
3.slice()方法：接收1个或2个参数，即要提取的项的起始位置和结束位置，如果只有一个参数该方法返回从该位置开始到数组结尾的所有项，如果有2个参数该方法返回第一个位置和第二个位置的所有项，不包括第二个位置的项
如：
var aCloros = ["red","green","blue","yellow","purple"];
var aCloros2 = aCloros.slice(1);
var aCloros3 = aCloros.slice(1,4);
alert(aCloros2);//output “green,blue,yellow,purple”
alert(aCloros3);//output “green,blue,yellow”
4.shift()方法：将删除数组中的第一个项，将其作为函数值返回
5.unshift()方法：把一个项放在数组的第一个位置，然后把余下的项下移一个位置
6.push()方法：在数组的结尾添加一个或多个项
7.pop()方法：删除最后一个数组项，将其作为函数值返回
8.splice()方法：把数据项插入数组中部，调用该方法时传入的参数不同作用不同
删除：传入2个参数，这2个参数是: 要删除的第一个项的位置和要删除的项的个数
替换而不删除：传入3个参数，这3个参数是：起始位置，0(要删除的个数)，要插入的项
替换并删除：传入3个参数，这3个参数是：起始位置，要删除的数组项个数，要插入的项
8. 正则中test 与 match 的区别？
test是RegExp的方法，参数是字符串，返回值是boolean类型。
match是String的方法，参数是正则表达式，返回值是数组。
9. 如何在js中创建一个对象并继承他？
function Person(name) {
this.name = name;
}
Person.prototype = {
constructor: Person, //强制声明构造函数，默认是Object
sayName : function() {
alert(this.name);
}
}
var Person1 = new Person("king");
10. 什么是prototype ? 什么是原型链？
通过new运算符创建的对象，构造函数.prototype的值就是该对象的原型对象。
var now = new Date();
如上代码，now对象的原型对象就是Date.prototype。
通过new 一个对象就可以调用里面的公开的方法，属性。
11. setTimeout 与 setInterval 的区别？
13. cssText是什么,cssText 怎么用？
cssText 的本质就是设置 HTML 元素的 style 属性值。
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
14. offsetWidth, scrollLeft, scrollHeight? scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度 <font color="#ffffff">内容来自17jquery</font>
15. IE的事件与w3c事件的区别？
w3c事件流:
从根文档(html)开始遍历所有子节点，如果目标事件的父节点设置为捕获时触发，则执行该事件，直到目标被执行，然后再事件冒泡(设置为捕获时触发的事件不再被执行)。
ie事件流:
从目标事件被执行，然后再冒泡父节点的事件，直到根文档。
2). 前端高级面试题
1. 除了jQuery以外，请写出你所知道的js框架，试说出不同框架的特点；
2. 对于Javascript中OOP的理念，你认为在项目开发中有没有必要，什么样的项目适合前端OOP，请谈谈你的看法；
3. 在Javascript开发中，关于性能优化，分享一下你相关的经验？
4. 对于模块开发你是怎么看的？
5. 对于Javascript MVC开发你是怎么看的？分享一下你了解的相关信息？
6. AJAX是什么? AJAX跨域的解决办法?
相关文章
最新发布
阅读排行
热门文章
猜你喜欢