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

时间: 2024-10-17 00:55:17

WEB前端面试题整理的相关文章

web前端面试题整理(HTML篇)

web前端面试题整理(HTML篇)需要web前端课程工具和电子书,可以加: 33群105601600;  22群1203428331. h5的改进:新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ,  footer, section, aside, hgroup等.时间time 新属性拖放: draggable   <img draggable=&q

【web前端面试题整理08】说说最近几次面试(水)

为什么换工作 换工作简单来讲一般会归纳为钱不够或者人不对,我们团队氛围很不错,所以基本就定位到钱不够了,而我更多是考虑到以后的职业发展,简单说来就是对以后几年的工作有想法,而这种想法实现不一定能在现在的团队获得,在短期内也看不到希望,加之公司职级晋升不合理等考虑,也就自然而然想到了离职. 其实在鞋厂这两年,真的收获了很多东西,也负责了很重要的业务,这些财富可能是其它大公司不一定能给予的,虽然一直级别低点也就没太多在意,直到最近职级福利缩水...... 最初我面试的职级为X,HR给了一套智力题做,

【web前端面试题整理02】前端面试题第二弹袭来,接招!(转)

前言 今天本来准备先了解下node.js的,但是, 看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端 面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 JavaScript编程题1.实现输出document对象中所有成员的名称和类型:2.如何获得一个DOM元素的绝对位置?(获得元素位置,不依赖框架)3.如何利用JS生成一个table?4.实现预加载一张图片,加载完成后显示在网页中并设定其高度为50px,宽度为50px:5.假设有一个4行td的tabl

2016年BAT公司常见的Web前端面试题整理

1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined 引用数据类型:Object(Array,Date,RegExp,Function,Null) 那么问题来了,如何判断某变量是否为数组数据类型? 方法一.判断其是否具有“数组性质”,如slice()方法.可自己给该变量定义slice方法,故有时会失效 方法二.obj instanceof Array

web前端面试题整理后篇(程序篇)

需要web前端课程工具和电子书,可以加: 33群105601600;  22群120342833 1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) {     obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量ob

WEB前端面试题整理列表

1.列举你工作中遇到的IE6 BUG,谈谈解决方案. 3.如何用CSS分别单独定义IE6.7.8的width属性. 所有浏览器 通用height: 100px;IE6 专用_height: 100px;IE6 专用*height: 100px;IE7 专用*+height: 100px;IE7.FF 共用height: 100px !important; 4.CSS中哪些属性可以同父元素继承. 继承:(X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性 Color

web前端面试题整理(程序篇)

1. var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj);       //问obj的值会改变吗? var obj = {a : 1}; (function (obj) { obj = {a : 2}; })(obj); //问obj的值会改变吗? 外部的obj不变. 因为匿名函数中obj传入参数等于是创建了一个局部变量obj, 里面的obj指向了一个新的对象 . 如果改成(function () { obj = {a : 2}

【web前端面试题整理07】我不理解表现与数据分离。。。(转)

拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. http://www.cnblogs.com/aaronjs/ 前言 上周回到了成都,这周就准备找工作了,对成都的聚美优品其实比较有好感的,所以昨天就先去 面试了,感觉技术面试的还不错啦,结果最后HR说经理不在,让我等经理反馈. 我当时相信了,但是回来想想感觉可能失败了,但是我不知道哪里出了问题.

web前端面试题系列:(一)

1.作用域问题 var a = 6; setTimeout(function () { alert(a); a = 666; }, 1000); a = 66; 结果:66 2.语义化标签 1)tite与h1的区别 2)b与strong的区别 3)i与em的区别 PS:不要小看这些题,80%人答不上来 3.事件绑定 addEventListener,第三个参数是用来表示事件是以事件冒泡还是事件捕获这个各位都知道!但是他问的问题是: 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你