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

1. 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