2015校招前端面试题

啦啦啦~一些面试题的分享（面一次更新一次啦）

感觉整理的有点太详细了，可以看过一遍之后组织成自己的语言，把重点的答出来就行，如果面试官继续追问的话再接着答后面的。

CSS部分

1.CSS布局的特点（定位属性、各自区别、应用场景）

答：CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流中的位置重新定位。

　　定位属性：position、z-index、top、right、bottom、left;

　　position属性：

　　　　　　　　static（静态定位）：参照父元素，遵循基本的定位规则，不能使用z-index进行层级分级　

　　　　　　　　relative（相对定位）：对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

　　　　　　　　absolute(绝对定位)： 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位　　　　　　 属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
　　　　　　　 fixed（固定定位）： 这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

　　top/left/bottom/right百分比计算规则：

　　relative（相对定位）：参照父元素的宽度或高度，且可以是负值。

　　absolute(绝对定位)： 参照定位上下文的宽度或高度，且可以是负值。

　　　　　　　 fixed（固定定位）： 参照窗口的宽度或高度，且可以是负值。

2.谈一下对盒模型的理解

答：盒模型分为

　　标准盒模型：元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。

　　IE盒模型： width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

　　在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。如果元素没有设置width和　　　　 height的话，width和height等于父节点元素的width和height减去外边距、边框和内边距。

下面这部分面试肯定不用答的，但是我觉得对于我这种经常算不准元素宽高的人还是挺有用的，选择性的看吧

　　 盒模型大小计算规则（摘自http://blog.csdn.net/zhbhun/article/details/47316215博客）

非替换行内元素

宽度 = 内容宽度 + 左右内边距 + 边框 + 左右外边距

高度 = 内容高度 + 上下内边距 + 边框 （上下内边距无效） 内容宽度或高度加上内边距和外边距（margin的top和bottom无效）

没有设置大小的替换行内元素/没有设置大小的行内块级元素

宽度 = 内容宽度 + 左右内边距 + 边框 + 左右外边距

高度 = 内容高度 + 上下内边距 + 边框 + 上下内边距

没有设置大小的块级元素

宽度 = 父节点内容宽度

高度 = 内容高度 + 上下内边距 + 边框 + 上下内边距

有设置大小的元素

默认盒模型/box-sizing=content-box

内容宽度 = width

内容高度 = height

宽度 = width + 左右外边距 + 边框 + 左右内边距

高度 = 类似宽度

IE怪异模式/box-sizing=border-box

内容宽度 = width属性 - 左右外边距 - 边框 - 左右内边距

内容高度 = 类似内容宽度

宽度 = width

height = height

3.jQuery快在哪里

　（这个问题我到现在都不知道他想问什么，暂时理解为为什么会提高开发效率吧）

答：a.简洁的思想：几乎所有操作都是以选择DOM元素（有强大的Selector）开始.

　　b.链式操作可以让更少的代码做更多的事情

　　c.不用每次都遍历所有的节点，比CSS选择器快

d.压缩后大小小，有很多开源的插件

4.CSS3有哪些新特性

5.CSS3实现3D动画

6.CSS3有哪些好处

7.有两个width分别为50%的div,左边的div有10个像素的padding，右边的元素被挤下去了，请你修复它，尽可能多的说出方案。

　　　方案一：设置左边的div，box-sizing:border-box;弹性盒模型

　　　 方案二：（有想到其他办法可以留言给我啊）

8.

JavaScript方面

1.JavaScript都有哪些类型？

　　基本类型：number,boolean,string,undefined,null

　　复杂类型：Object,Function,Array

　　简单记就是（5+3）；

2.谈谈undefined,null的区别

　　答：undefined：声明后没有定义初始值的变量；

　　　　null在 Javascript中代表一个特殊的Object类型的值，他用来表示空引用的概念

3.定义函数的方法

　　答：函数声明：声明提升，会把声明提到最前面

　　　　函数表达式：直到程序执行到这一行才会初始化函数

4.JS函数参数的特点

　　答：JavaScript不在乎你传入了多少参数，参数是什么类型。所有的参数都保存在arguments对象中，可以通过访问arguments[0]等来访问参数，length属性来访问参数的个数。

5.谈下JS中的prototype属性

　　答：

6.对闭包的理解

　　答：a、闭包就是能够读取其他函数内部变量的函数。

[align=left]　　　 b、在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。[/align]

闭包的用途

闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

[align=left]　　JS中作用域的概念：
　　表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函　　数来区分的。[/align]
[align=left]7.JS中有哪些创建对象的方法[/align]
[align=left]　　答：[/align]
[align=left]8.JS中有哪些实现继承的方法[/align]
[align=left]　　答：[/align]
[align=left]9.[/align]
[align=left]HTTP协议[/align]
[align=left]1.HTTP协议的消息报文[/align]
[align=left]2.HTTP协议状态码[/align]
[align=left]3.HTTP请求的方法[/align]
[align=left]4.get与post的区别[/align]
[align=left]　　答：a.GET一般用于获取/查询资源信息，而POST一般用于更新资源信息[/align]
[align=left]　　　　b.根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。[/align]
[align=left]　　　　c.根据HTTP规范，POST表示可能修改变服务器上的资源的请求。[/align]
[align=left]　　　　d.POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真　　正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。[/align]
[align=left]　　　　总结一下，Get是向服务器发索取数据的一种请求，而Post是向服务器提交数据的一种请求，在FORM（表单）中，Method默认为"GET"，实质上，GET和POST只是发送机制不同，并不是一个取一个发！[/align]
[align=left]5.301与302的区别[/align]
[align=left] 答：301转向表示网页永久性转移到另一个地址[/align]
[align=left]　　　 302暂时重定向是一种服务端的重定向[/align]
[align=left]　　　　区别：302重定向是暂时重定向，搜索引擎会抓取新的内容，保存旧的地址[/align]
[align=left]　　　　　　　301重定向是永久的重定向，搜索引擎在抓取新的内容的同时将旧的地址换为重定向后的地址。[/align]
[align=left]其他问题[/align]
[align=left]1.自我介绍[/align]
[align=left]　　示例：[/align]
[align=left]2.介绍你的一个项目[/align]
[align=left]3.项目中遇到的问题，问题怎么解决的[/align]
[align=left]4.你有什么想问我的[/align]
[align=left]5.有没有写过插件[/align]
[align=left]6.有没有开源的项目[/align]
[align=left]7.你觉得你的优势是什么[/align]
[align=left]8.为什么选择做前端[/align]
[align=left]9.切图的基本流程[/align]
[align=left]　　打开PSD----隐藏不需要的图层（为了切出背景透明的图片）----放大----选择选中区域----右键点属性编辑图层微调----存储为web所用格式[/align]
[align=left]　　摘自：http://www.w3ctech.com/topic/263[/align]
　　当整个方案确定后, 且设计给出图后, 就要进入切图阶段了, 当然有较好的 "原型设计图" + 需求文档 会使我们切的更加帅气, 切图前要纵观整个图/集, 查看是否有可重复利用的　　　　　　元素/icon(ps:这也跟设计有很大关系), 切图前要熟悉公司的 重置样式, 公用样式, 公用库等, 因为这样使你少写代码, 需要查看文档或者跟产品沟通, 心里要明白哪些地方需要交互, 有哪些交互, 然后在写HTML的时候要合理的分配这些"资源", 比如预留勾子代码, 是否有ajax列表啊, 做

HTML

前要心里给出这个页面的最佳方案, 比如

seo

中

h*

类的标题, 页面是否需要延迟加载片段, 是否有

iframe

等, 然后快速的制作出

HTML

页面, 当然制作中难免要多查看各种浏览器的表现形式, 然后在需要后端配合的地方打上明确的注释, 比如: 各种状态, 循环, 空, 特殊需求等...
　　当切完图后, 页面是否可以通过检测工具检测呢? 是否兼容? 是否在火狐源代码里有红色警告?

　　如果有需要异步接口的地方可以本地模拟一下, 定出接口文档, 然后自己模拟出环境, 并按文档的规范写出来, 最后把文档给后端同学.

　　总的来说切图过程如下：

　　1.拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写出来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。

　　2.写完之后在各个浏览器运行之后确保大体定位都没有问题。

　　3.书写总体css,这里的css只负责大块的定位及样式。

　　4.切出需要的图片资源，在写好的框架中一点点的去构造，不断的调试，细节调整，浏览器验证是否正确，最终为成品。

　　5. 最后，为自己的代码添加注释，在css，html中都要合适的为自己的代码添加注释。

[align=left] [/align]
[align=left] [/align]