web前端面试题

第一部分：html和css

1、css 的position有几个值？作用？默认的position是什么？
（1） absolute（相对于static定位以外的第一个父元素进行定位）
（2）fixed （相对于浏览器窗口定位）
（3）relative(相对于其正常位置定位)
（4）static(默认值，没有定位)
（5） inherit(规定应该从父元素继承Position属性的值)
2、行内元素有哪些?块级元素有哪些?CSS的盒模型?
行内元素：div，h1，h2，p，ul
块元素：span，em，b，strong，a，i
css盒子模型：内容，padding，border，margin
3、css清除浮动的方法
（1）clear：both；
（2）overflow：hidden；
（3）.outer {zoom:1;} /* for IE6/7 */
.outer :after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;} /for FF/chrome/opera/IE8/
4、简单列出所知道的css3以及html5的一些常用属性或者标签
（1） 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
（2）Html5
canvas video audio footer header time article
属性： data-aaa dir (规定元素中内容的文本方向) draggable(规定是否允许用户拖动元素) accesskey(规定访问元素的键盘快捷键)
Contenteditable (规定是否允许用户编辑内容)
5. 解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
6. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
7. 你如何对网站的文件和资源进行优化?
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
8．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%;}

第二部分：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