WEB前端面试题整理

1、列举你工作中遇到的IE6 BUG，谈谈解决方案。
 

1.双倍边距bug:
例如：给元素添加属性float:left的时候，设置margin-left，margin属性会加倍，此时需要添加属性display:inline.
这样能避免双倍边距
2.发生在一个元素浮动，然后一个不浮动的元素自然上浮与之靠近会出现的
3px的bug。只有采用“暴力破解法”,人为地调整3px。
3.当子元素浮动未知高度时，使父容器适应子元素的高度bug
overflow:auto;-------让父容器自适应子元素的高度
_zoom:1;---------为了兼容IE6而使用的CSS Hack
4.外部相对定位div的奇数宽高bug
比如：可以将外部相对定位div的宽高为奇数时，会产生1px的边距，可以将外部相对定位的div的宽高改为偶数
5. 图片下方有空隙产生
给img元素添加属性：display:block;
6.ie6下的空标签高度bug
一个空div，如果设置高度为0到19px,会默认始终为19px,此时可以在空标签中添加一些html注释标签
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
行内元素有：a b span I  img input select strong(input用于定义表单中的各个具体的表单元素)
块级元素有：div ul ol lidl dt dd
盒模型：margin border padding width

3.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？
标记选择器，类选择器，ID选择器。优先级就近原则
载入样式以最后载入的定位为准。

5:前端页面有哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层：由HTML 或XHTML 之类的标记语言负责创建，即HTML的语义化。，说白了就是一些标签
网页的表示层：说白了就是CSS
网页的行为层：说白了就是Javascript 语言和DOM 主宰的领域。
6:css的基本语句构成是？
层叠样式表
（自定义的样式名称）｛    样式内容｝;
 

 
9.如何居中一个浮动元素?
position：relative;margin-left:50%;left:-width/2
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
HTML5

添加了video和audio标签

添加了canvas绘画元素

更加语义化：添加了header,footer,article

新的表单元素：datalist,keygen,output

新的input类型：email,number,url

等等
CSS3实现圆角，阴影（text-showdow）对文字加特效(text-overflow,word-wrap,font-size-adjust)，增加了更多的CSS选择器(全局选择器，组合选择器，继承选择器，伪类选择器等)

11:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
1.css文件，以及js文件尽量分别都放在一个文件里，减少客户端请求服务器的次数
2.背景图片尽量采用CSS sprites技术
3.css和JS的命名尽量采用英文有意义的缩写

 
 
 
[Javascript]
2.怎样添加、移除、替换、复制、创建和查找节点

（1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement_x_x_x_x_x()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

    a()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值

      getElementById()    //通过元素Id，唯一性

3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
普及：有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM 元素的某事件例如click事件被触发时，依次它的父元素的click事件也被触发，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当 某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。
怎样使用事件：
1.直接在DOM元素上绑定事件处理器
2.FF等浏览器遵循W3C标准来制定浏览器事件模型，使用addEventListener和removeEventListener两个函数
3.IE自己的事件模型，但主要是通过attachEvent和detachEvent两个函数来实现的。
主要差别：
直接在DOM元素上绑定事件处理器：它是一种通用方式,并且Event处理函数内部的this变量都指向被绑定的DOM元素。至于它的缺点也很明显，就是 传统方式只支持Bubbling，而不支持Capturing，并且一次只能绑定一个事件处理器在DOM元素上最后就是function参数中的 event参数只对非IE浏览器有效果。
FF等浏览器遵循W3C标准来制定浏览器事件模型：addEventListener带有三个参数，第一个参数是去掉on的事件类型，第二个参数是处理函数，可以直接给函数字面量或者函数名，第三个参数是boolean值，表示事件是否支持Capturing。
W3C的事件模型优点是Bubbling和Capturing都支持，并且可以在一个DOM元素上绑定多个事件处理函数，并且在处理函数内部，this关键字仍然指向被绑定的DOM元素。
至于它的缺点，很不幸的就只有在市场份额最大的IE浏览器下不可使用这一点。
IE自己的事件模型：可以发现它跟W3C的区别是没有第三个参数，而且第一个表示事件类型的参数也必须把’on’给加上。这种方式的优点就是能绑定多个事件处理函数在同一个DOM元素上。
首先IE浏览器本身只支持Bubbling不支持Capturing；而且在处理函数内部this关键字也无法使用，因为this永远都只向window object这个全局对象。要想得到event对象必须通过window.event方式，最后一点，在别的浏览器中，它显然是无法工作的。

4.面向对象编程:b怎么继承a

5.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
 

 
7.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
ajax:Ajax是无需刷新页面而从服务器端获取数据

模型就是Ajax在浏览器端引入一个执行引擎，它一边应付user的请求，一边把某些必须交给服务器处理的东西传送给服务器，同时把结果准备好，展现给user的技术模式
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本不停留并处理可能的回复
ajax用jsonp处理跨域问题或jquery jsonp插件处理跨域问题。jsonp比json多一个callback