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