web前端开发面试题汇总.doc

该【web前端开发面试题汇总 】是由【花双韵芝】上传分享，文档一共【19】页，该文档可以免费在线阅读，需要了解更多关于【web前端开发面试题汇总 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。______________________________________________________________________________________________________________
web前端开发面试题汇总
1天前653阅读2讨论
前端面试题汇总
HTML&CSS
?有哪些内核(Layout
Engine)?
(Q1)阅读器:IE,Chrome,FireFox,Safari,Opera。
(Q2)内核:Trident,Gecko,Presto,Webkit。
说下行内元素和块级元素的差别?行内块元素的兼容性使用?
IE8以下)
行内元素:会在水平方向摆列,不可以包含块级元素,设置width无效,height无
(可以设置line-height),margin上下无效,padding上下无效。
块级元素:各占有一行,垂直方向摆列。重新行开始结束接着一个断行。
兼容性:display:inline-block;display:inline;zoom:1;
除掉浮动有哪些方式?比较好的方式是哪一种?
(1)父级div定义height。
2)结尾处加空div标签clear:both。
3)父级div定义伪类:after和zoom。
4)父级div定义overflow:hidden。
-可编写改正-
______________________________________________________________________________________________________________
5)父级div定义overflow:auto。
6)父级div也浮动,需要定义宽度。
7)父级div定义display:table。
8)结尾处加br标签clear:both。
总结:比较好的是第3种方式,简短方便。
box-sizing常用的属性有哪些?分别有什么作用?
常用的属性:box-sizing:content-boxborder-boxinherit;
作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度以外绘制
元素的内边距和边框(元素默认见效)。
border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘
制。经过从已设定的宽度和高度分别减去边框和内边距才能获得内容的宽度和高
度。
?标准模式与兼容模式各有什么差别?
(Q1)见告阅读器的解析器用什么文档标准解析这个文档。DOCTYPE不存在
或格式不正确会致使文档以兼容模式表现。
(Q2)标准模式的排版和JS运作模式都是以该阅读器支持的最高标准运转。在兼
容模式中,页面以宽松的向后兼容的方式显示,模拟老式阅读器的行为以防备站
点没法工作。
<Doctypehtml>?
-可编写改正-
______________________________________________________________________________________________________________
HTML5不鉴于SGML,所以不需要对DTD进行引用;可是需要doctype来规
范阅读器的行为(让阅读器依据它们应当的方式来运转)。
SGML,所以需要对DTD进行引用,才能见告阅读器文档所使用的文档种类。
页面导进款式时,使用link和***@import有什么差别?
(1)link属于XHTML标签,除了加载CSS外,还可以用于定义RSS,定义rel
连结属性等作用;而***@import是CSS供给的,只好用于加载CSS;
2)页面被加载的时,link会同时被加载,而***@import引用的CSS会等到页面被加载完再加载;
3),只在IE5以上才能被鉴识,而link是XHTML标
签,无兼容问题。
总之,link要优于***@import。
介绍一下你对阅读器内核的理解?
IE阅读器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分
支)、Opera内核原为Presto
,现为Blink;
内核主要分红两部分:
衬着引擎(layoutengineer或RenderingEngine)和JS引擎
衬着引擎:负责获得网页的内容(HTML、XML、图像等等)、整理讯息(例
如加入CSS等),以及计算网页的显示方式,此后会输出至显示器或打印机。浏
览器的内核的不同样对于网页的语法解说会有不同样,所以衬着的见效也不同样。
全部网页阅读器、电子邮件客户端以及其余需要编写、显示网络内容的应用程序
-可编写改正-
______________________________________________________________________________________________________________
都需要内核。
JS引擎则:解析和履行javascript来实现网页的动向见效。最开始衬着引擎和JS
引擎并无区分的很明确,今后JS引擎愈来愈独立,内核就偏向于只指衬着引
擎。
?如何办理HTML5新标签的浏
览器兼容问题?如何区分HTML和HTML5?
(Q1)HTML5此刻已经不是SGML的子集,主假如对于图像,地点,积蓄,
多任务等功能的增添。
(1)绘画canvas;
(2)用于媒介回放的video和audio元素;
(3)当地离线积蓄localStorage长久积蓄数据,阅读器封闭后数据不抛弃;
(4)sessionStorage的数据在阅读器封闭后自动删除;
(5)语意化更好的内容元素,比方article、footer、header、nav、section;(6)表单控
件,calendar、date、time、email、url、search;
(7)新的技术webworker,websocket,Geolocation;
(Q2)IE8/IE7/,可以利用
这一特色让这些阅读器支持HTML5新标签,阅读器支持新标签后,还需要添
加标签默认的款式。也可以直接使用成熟的框架、比方html5shim,
简述一下你对HTML语义化的理解?
用正确的标签做正确的事情。
-可编写改正-
______________________________________________________________________________________________________________
,构造更清楚,便于对阅读器、搜寻引擎
解析;
,而且是简单阅读的;
搜寻引擎的爬虫也依靠于HTML标志来确立上下文和各个重点字的权重,利于
SEO;
,便于阅读保护理解。
11##常有兼容性问题?
png24位的图片在iE6阅读器上出现背景,解决方案是做成PNG8.
阅读器默认的margin和padding不同样。解决方案是加一个全局的
{margin:0;padding:0;}来一致。IE6双边距bug:块属性标签float后,又有横行的
margin状况下,在ie6显示margin比设置的大。浮动ie产生的双倍距
#box{float:left;width:10px;margin:000100px;}
这类状况之下IE会产生20px的距离,解决方案是在float的标签款式控制中加
入——_display:inline;将其转变为行内属性。(_这个符号只有ie6会鉴识)渐进鉴识
的方式,从整体中渐渐除掉局部。
第一,奇妙的使用“\9”这一标志,将IE旅行器从全部状况中分别出来。接着,
再次使用“+”将IE8和IE7、IE6分别开来,这样IE8已经独立鉴识。{
background-color:#f1ee18;/全部鉴识/.background-color:#00deff\9;/IE6、
7、8鉴识/+background-color:#a200ff;/IE6、7鉴识
/_background-color:#1e0bd1;/IE6鉴识/}
IE下,可以使用获得常例属性的方法来获得自定义属性,也可以使用getAttribute()
获得自定义属性;Firefox下,只好使用getAttribute():一致
-可编写改正-
______________________________________________________________________________________________________________
经过getAttribute(),even对象有x,y属性,可是没有
pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,可是没有x,y属性.
解决方法:(条件说明)弊端是在IE阅读器下可能会增添额外的HTTP恳求数。
Chrome中文界面下默认会将小于12px的文本强迫依据12px显示,可经过加
CSS属性-webkit-text-size-adjust:none;解决.
超链接接见事后hover款式就不出现了被点击接见过的超链接款式不在拥有
hover和active认识决方法是改变CSS属性的摆列顺
:L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}
,描绘一下cookies,sessionStorage
localStorage的差别?
cookie在阅读器和服务器间往返传达。sessionStorage和localStorage不会
sessionStorage和localStorage的积蓄空间更大;
sessionStorage和localStorage有更多丰富易用的接口;
sessionStorage和localStorage各自独立的积蓄空间;
CSS一、介绍一下CSS的盒子模型?
(1)有两种,IE盒子模型、标准W3C盒子模型;IE的content部分包
含了border和pading;
(2)盒模型:内容(content)、填补(padding)、界限(margin)、边框
(border).
-可编写改正-
______________________________________________________________________________________________________________
二、CSS选择符有哪些?哪些属性可以继承?优先级
算法如何计算?
新增伪类有那些?
(#myid)
(.myclassname)
(div,h1,p)
(h1+p)
(ul>li)
(lia)
(*)
(a[rel="external"])
(a:hover,li:nth-child)
可继承的款式:
font-sizefont-familycolor,ULLIDLDDDT;
不可以继承的款式:
borderpaddingmarginwidthheight
优先级就近原则,同权重状况下款式定义近来者为准;
载进款式以最后载入的定位为准;
优先级为:!important>id>class>tag,important比内联优先级高
三、CSS3新增伪类举例
-可编写改正-
______________________________________________________________________________________________________________
p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。
p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。
p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。
p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。
:enabled:disabled控制表单控件的禁用状态。
:checked单项选择框或复选框被选中。
四、如何居中div?如何居中一个浮动元素?
水平居中:
div设置一个宽度,此后增添margin:0auto属性
div{width:200px;margin:0auto;}
垂直居中:
确立容器的宽高:如宽500高300的层
设置层的外边距
.div{Width:500pxheight:300px;//高度可以不设
Margin:-150px00-250px;position:relative;相对定位
background-color:pink;//方便看见效
left:50%;top:50%;}
五、列出display的值,说明他们的作用。position的值,
relative和absolute定位原点是
-可编写改正-
______________________________________________________________________________________________________________
。
none缺省值。象行内元素种类同样显示。
inline-block象行内元素同样显示,但其内容象块种类元素同样显示。
list-item象块种类元素同样显示,并增添款式列表标志。
2.
absolute生成绝对定位的元素,相对于static定位以外的第一个父
元素进行定位。
fixed(老IE不支持)生成绝对定位的元素,相对于阅读器窗口进
行定位。
relative生成相对定位的元素,相对于其正常地点进行定位。
static默认值。没有定位,元素出此刻正常的流中
(忽视top,bottom,left,rightz-index申明)
inherit规定从父元素继承position属性的值。六、CSS3有
哪些新特色##?
CSS3实现圆角(border-radius:8px),
暗影(box-shadow:10px),
对文字加殊效(text-shadow、)
线性渐变(gradient)
旋转(transform)
transform:rotate(9deg)scale(,)translate(0px,-30px)
skew(-9deg,0deg);//旋转,缩放,定位,倾斜
-可编写改正-
______________________________________________________________________________________________________________
增添了更多的CSS选择器多背景rgba七、一个满屏品
字布局如何设计八、为何要初始化CSS款式。
因为阅读器的兼容问题,不同样阅读器对有些标签的默认值是不同样的,假如没对
CSS
初始化常常会出现阅读器之间的页面显示差别。
初始化款式会对SEO有必然的影响,但鱼和熊掌不可以兼得,但力争影响最
小的状况下初始化。
最简单的初始化方法就是:{padding:0;margin:0;}(不建议)
如淘宝的款式初始化:
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,
legend,button,input,
textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
-可编写改正-