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