回国半个月的准海带，今天体验了一下第一场技术面试。首先是一套题目，30分钟左右的时间根据自己的水平选难题回答，答完之后之后才进行面试。面试官问了很多基础问题，也很多没能回答上。略受打击。。。
后悔试题没拍照，根据回忆整理：
1.上下左右居中
这个题面试前才看过，但问到还是不能说清楚，还是基础有硬伤
思路为绝对定位，在宽高一定的情况下，上下设置为50%。之后设置margin为负值，margin-top和margin-left为自身高度和宽度的一半，将位置拉回中间。
2.两栏，左边固定100px，右边自适应
其实做布局这个用的最多最常见，我也说的蛮自信的，可惜我把两个思路的属性说混了。
第一个思路是左边用float:left，右边用margin-left为左栏的宽度。
第二个思路略复杂，右栏width:100%,float:left,但是这样就会超出屏幕的宽度，于是用负值margin拉回来。但这就出现另一个问题，由于右栏缩到左栏里，所以左栏会遮盖右栏的一部分，所以在右栏内部再镶嵌一层，margin-left为左栏的宽度
补充：第三种方式是在整理下面题目的时候发现的，用display:table-cell的自适应。
思路还是，因为table-cell的自适应，将右栏设的尽可能的大。
3.盒模型
盒模型可以帮助块级元素的定位和计算面积，简单来说W3C的盒模型包括content、padding、border。而IE得盒模型则有些不同，表现在设置宽高的时候，W3C模型下只包含content区域，而IE包括所有区域。
这样，在IE下，设置了宽高之后可以很放心的设定padding，但是对于W3C模型下，设置了宽高之后还要计算padding和border的区域。因此有一个方法叫做box-sizing:border-box。border-box将border和padding区域一同算进设定的宽高内。这样的话添加如下代码，就可以设定padding而用不担心超出设置区域。
4.几种方法生成三个并排的大小相等的元素
这个问题让我有点蒙，首先想到的是三个元素都用百分比控制
其实还有可以用display:inline-block。回家以后尝试了一下，发现问题是如果这几个元素没有在代码里写在一行，那么最后展现出来的是最后一个元素会被挤到下面一行。
大神男友告诉我hack方法为：
关于inline-block缝隙，推荐一篇文章：去除间距
还有一个方法为tabel-cell，这种方法就是将每一个元素设置的尽可能的大，但由于自适应的特性，这三个元素还是会乖乖地等分的排在一行里。
接着昨天的继续补充
5.CSS3的新特性用过哪些
对于我来说最常用当然是border-radius，让圆角成为方便的存在。
然而他问第二个问题：怎样将方的通过圆角变成圆的？
其实只要
就好了。可惜当时我怕这个不能用百分比，于是说如果50的宽高，半径为25就好。其实这个也没错啦，但也看的出我基础不扎实。
除此之外，box-shadow也是咱常用的属性之一。设置水平、垂直的位移，阴影的模糊、尺寸还有颜色，就可以为元素添加阴影。
然后我也提了一下border-image这个好用又漂亮的属性。通过设置图片路径，图片的切割方式、还有边框的宽度、溢出，以及平铺或拉伸等呈现方式，可以做出一个漂亮精致的边框。
关于border-image的每一项属性的用法和限制，可以参考我大神男友的文章CSS 3 border-image 属性详解
面试官还问到了动画：transition、transform和animation的区别？
可惜我目前并没有用CSS做过动画【摊手。。
他专门问到了这个问题，说明CSS3的动画是应用较多的，回来立刻学习。
transform是指转换，可以将元素移动、旋转、倾斜、拉伸。
translate()，从当前位置移动到由给定left和top值的位置。这个例子中，div向右下移动，如果想要往左上移动，则要设置为负值。
rotate()，将元素旋转到给定角度，单位为deg（degree角度），在这个例子中为顺时针30度。负值的话为逆时针旋转。
skew() ，将元素倾斜到给定角度，单位也是deg，分别围绕着X轴和Y轴翻转。这个例子中，在X轴顺时针翻转30度，Y轴顺时针翻转20度，负值为逆时针翻转。
scale()，将元素拉伸到指定的倍数，同样设定了X与Y两个方向。这个例子中把宽度拉伸2倍，高度拉伸4倍。有意思的是，负值不是缩小，而是翻转，既水平翻转和垂直翻转。
transform并没有变化的过程，而是直接生成最终效果。transform还有3D方法，就是多了一个Z轴（Opera不支持）
transition是指过渡，可以动画般显示出一个从样式到样式之间的过渡。
上面说过transform没有变化的过程，这样一来就可以动画显示出各种酷炫的效果。
transform的属性包括一个你设定过渡的CSS属性，持续时间，时间曲线还有过渡开始的时间。
比较麻烦的写法，每一项属性单独写：
简单的写法就是将属性都写在transition中。下面例子中包括了之前我们将transform的旋转，效果比较酷炫。（背景用色有点小私心，不过过渡很漂亮
animation，用@keyframes规则做动画效果。
如果说transition是过渡中的动画效果，那么animation就是专门做动画的。transition是animation的简化，是当属性发生变化的时候，触发过渡动画。就是上面例子中hover的时候，css的属性变化了，那么在transition里面绑定过得属性动画过渡过去。
animation就复杂多了：@keyframes可以有from to，也可以是百分比表示时间帧。
from-to
百分比
然后再将这个@keyframes绑定到一个元素上。
animation提供了更多属性，包括@keyframes名字、持续时间、速度曲线、开始时间、播放次数等。
有了这几个属性，css可以在很多时候取代flash和动图了。
可能因为笔试中JS题目较多，所以面试的时候没有问太多。
1.优化代码，事件委托
笔试的题目上给了一段代码让我优化。具体代码记不清，大概是获取的元素，然后循环为每一个添加mouseover和mouseout事件。
然后面试官又问我为什么事件委托效率更高
还是基础硬伤，我只是大概知道什么是事件委托，对于原理还不了解。于是回来又查参考书《Javascript高级程序设计》
?事件委托利用了事件冒泡，指定一个事件处理程序，就可以管理某一个类型的所有事件。
书上解释，在DOM树中尽量高的层次上添加一个事件处理程序。那么在他的子孙元素中的事件，最终都会冒泡到这个层次中。例如，列表里有两个项目，我们不要分别设置每一个项目点击时的事件，而是在上层中建立事件委托。
2.添加一个类似email中checklist的双向联动
起初，我的内心是崩溃的。。。
这个题刚开始都没搞清楚是做什么的，一直到做完整个卷子我才又回头看了看这个题。时间有限，都没来得及想就往纸上写。
其实这个题是让我做一个类似email里选择发件人的东西，勾选的时候添加到发件人，取消勾选的时候从发件人里面删除。由于是双向联动，因此要在发件人里点击的时候可以删除，并且取消勾选。好像说的有点乱，看下面代码。
其实主要还是事件绑定，然后添加节点，改变属性。
3.Array的方法
面试官问到Array有几种方法，这个我在面试前曾经简单整理过，所以感觉回答也比较满意。
isArray()，判断是否为Array类型。
join()，将Array类型转换为字符串类型,并用join内的符号间隔开。
队列，栈的用法
push()，将数据项放到数组的后面。
pop()，将数组的最后一项删除并返回。
shift()，将数组的第一项删除并返回。
unshift()，将数据项放到数组的前面。
重排序的方法
reverse()，将数组逆序排列。
sort()，将数组由小到大排列。默认是按照字符串比较，也就是说15比5小。要按照数字排列的话，要设定方法：
操作Array的方法
concat()，在原有meat数组上创建新数组
slice()，截取从指定位置开始到结束为止(不包含结束位置)的数组项赋给新数组，如果没有第二个参数，则截取从指定位置开始到结束的数组项赋给新数组
splice()，从指定位置(第一个参数)删除指定个数(第二个参数)并插入指定项目(’第三个参数”)
位置方法
indexOf()，从前向后查找位置索引。
lastIndexOf()，从后向前查找位置索引。
这两个方法支持第二个参数，既指定位置然后按照方法向前或向后查找位置。
遍历方法
every()中，每一项运行给定函数，每一项都返回true,则返回true。
filter()中，每一项运行给定函数，返回true的项。
forEach()中，每一项运行给定函数，无返回。
map()中，每一项运行给定函数，返回调用结果组成的数组。
some()中，每一项运行给定函数，任意一项返回true，?则返回true。
归并方法
reduce()?和reduceRight()都接受四个参数：前一个值，当前值，索引和数组对象。
reduce()是从左向右归并，当第一个值和第二个值运行过之后，结果将作为下一次运行的前一个值。
reduceRight()则是从右向左，归并方式与reduce()一样。
算法题就一个，给定字符串“abcba”，处理得到第一个不重复字母。
对算法实在只是了解个皮毛，所以这个问题估计最后还是写错了。回来后自己写了一个，可以得到答案，但也不知道是不是最优。
思路是首先将字符转换成数组，然后从小到大排序，然后循环对每一个数组项比较前后。因为曾经排序，如果是不重复的那么前后应该都与它不同。
1.AJAX过程，AJAX中如何区分get和post，get和post的区别
面试官在这个方面一气儿问了三个问题，可能因为我没一个问题都没能答的全面。
AJAX算是听人说的最多的一个技术，无需加载整个页面的情况下进行局部更新。
再用AJAX技术与服务器交换数据时，首先创建一个XMLHttpRequest对象，在特立独行的IE里是ActiveXObject。
接着我们用open()方法和send()方法，使用get和post会有些区别。然后，请求会发送给服务器，服务器会响应触发onreadystatechange事件，当readyState=4（请求完成）且status=200时，说明服务器已经就绪。然后用responseText或responseXML属性去获得字符串或XML格式的数据。
在AJAX中区别get和post，就要详谈open()方法和send()方法。
get请求常用于向服务器查询信息。
在get请求中，open()的第一个参数为“get”，第二个参数为URL，第三个参数为是否为异步。由于get请求的URL中通常带有参数，这些参数必须要使用encodeURIComponent()方法进行编码，否则会有格式错误。这样send()方法内部的参数可以传入null，传入的参数也会转到URL中。
post请求常用于向服务器提交信息。
在post请求中，open()的第一个参数为“post”，URL中不含有参数，第三个参数一样。post请求的send()方法中需要传入提交数据，可以使用XML或者字符串。在提交表单时，首先要设定请求头部的Content-Type为 application/x-www-form-urlencoded。
然后将传入的表单信息序列化，方便后端的程序获取数据。对于表单数据序列化，FormData对象可以直接放入send()内:
前面提过，get方式中url包含参数，而post中url是“干干净净”的。因为用处不同，post在提交内容的时候没有大小限制。而且post在发送时有内容体，那些提交的信息放在内容体内。
2.JSONP 跨域的特性
说实话我只在用JQuery的时候用过JSONP，只知道可以跨域，但不知道为什么可以。所以在被问到的时候，脑子又是一蒙。
由于跨域安全策略，XMLHttpRequest不能跨域请求，这是AJAX的一个主要限制。
JSONP是通过
