web前端面试集锦（自己搜集的，如有错误请不吝赐教）
css
1 浏览器兼容性 CSS hack（针对IE6-,IE7,IE8,IE9以及其他浏览器）
‘ * ’ : 所有的IE浏览器都能识别
说明：在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
(还可以这样解决)
<!-- 放置所有浏览器的样式 -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- 只放置IE必须的，而不能通过W3C的代码 -->
<!-- [if ie] -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- [endif] -->
2 . css position有几个值，作用，默认元素的position是什么？
css position 有5个值，absolute(相对于static定位以外的第一个父元素进行定位) fixed （相对于浏览器窗口定位）relative(相对于其正常位置定位) static(默认值，没有定位) inherit(规定应该从父元素继承Position属性的值)
3. 行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
4．Css清除浮动方法
方法一：添加新的元素、应用 clear：both；
|
.clear{clear:both; height: 0; line-height: 0; font-size: 0} |
方法二：父级div定义 overflow: auto
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
方法三 :after 方法：（注意：作用于浮动元素的父亲）
.outer {zoom:1;} /* for IE6/7 */
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} /*for FF/chrome/opera/IE8*/
5．简单列出所知道的css3以及html5的一些常用属性或者标签
Css3
border-radius 边框圆角 box-shadow 边框阴影
background-size 背景图片大小 text-shadow 文本阴影
word-wrap: normal | break-word 允许长单词换到下一行
word-break:normal | break-all | keep-all 规定自动换行的规则
text-overflow:clip | ellipsis | string
translate(50px,100px) , transform:rotate(30deg) , transform:scale(2,4);
transform:skew(30deg,30deg), transform:rotate(30deg).
过渡 transition
Html5
<canvas> <video> <audio> <footer> <header><hgroup><nav><time><article>
属性： data-aaa dir (规定元素中内容的文本方向) draggable(规定是否允许用户拖动元素) accesskey(规定访问元素的键盘快捷键)
Contenteditable (规定是否允许用户编辑内容)
6. 解释css sprites，如何使用。
Css 精灵
把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
7. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
8. 你如何对网站的文件和资源进行优化?
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
9．Css布局：三列，中间宽度自适应，左右边宽度固定100px;
.box {width:100%;height:200px;position:relative;}
.left{position:absolute;left:0px;top:0px;width:100px;height:100%;}
.right{position:absolute;right:0px;top:0px;width:100px;height:100%;}
.center {margin-left:100px;margin-right:100px;height:100%;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
JS
- JS有几种数据类型 分别是什么？
字符串（string）,数字（number）,数组（array）,布尔（boolean）
对象（object）,Null , undefined
2.Jquery获取元素的宽
$.width() 获取内容区域的宽度（不包括padding margin border的宽度）
$.innerWidth() 获取到包括内边距的宽度（content+padding）
$.outerWidth() 获取到内边距+边框的宽度 （content+padding+border）
$.outerWidth(true) content+padding+border+margin）
3. 面象对象有几种模式，分别是什么？
单例模式 (就是一种最简单的面象对象, 一次只有一个实例)
工厂模式
构造函数
原型模式
4. Ajax有几个状态值，每个状态值代表什么意思？
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
5. 简述JS的作用域以及作用域链
作用域：包含全局作用域和局部作用域
全局作用域使用范围①最外层函数和最外层函数外定义的变量有全局作用域
②所有未定义直接赋值的变量自动申明未拥有全局作用域
③所有window对象的属性拥有全局作用域
局部作用域：一般只在固定的代码片段内可以访问，比如：函数内部
6. this关键字
var name1 = "windowName";
function outer(){
var name1 = "我是上一级作用域";
function inner(){
//var name1 = "我是根本"
alert(this.name1); //这个是属性 输出是ABC 这里this指向的是window;
alert(name1); //这个是变量 输出的是cba这里考的是作用域，
}
inner();
}
- outer();
输出的顺序为： windowName 我是上一级作用域
7． 数组 split() join() 的区别 数组方法pop() push() unshift() shift()
var str2 = "012345678";
var str222 = str2.split("");
alert(str2.substring(2,8))
alert(str222)
split() 前者是切割成数组的形式，join()后者是将数组转换成字符串
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
输出：234567 0,1,2,3,4,5,6,7,8
8． 简述闭包是什么？有什么特性？对页面有什么影响？解决方法？
闭包是什么：闭包就是能够读取其他函数内部变量的函数
有什么特性：可以读取函数内部的变量，让变量的值始终保持在内存中
影响：使函数中的变量都保存在内存中，内存消耗大，网页性能问题，IE中导致内存泄露
解决方法： 退出函数之前，将不是用的局部变量全部释放
9. 利用原型以及原型链的原理，写2个函数 分别为加法和减法 ，实现 5+3-2
Number.prototype.plus = function(n){
return this+n;
}
Number.prototype.reduce = function(n){
return this - n
}
(5).plus(3).reduce(2)
10. 添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
