1、web前端开发面试题汇总模板web 前端开发面试题汇总1天前 653 阅读 2议论前端面试题汇总HTML&CSS1. 常用那几种阅读器测试？有哪些内核 (LayoutEngine)?(Q1) 阅读器： IE ，Chrome ，FireFox ， Safari ，Opera 。(Q2) 内核： Trident ，Gecko ，Presto ，Webkit 。2.说下行内元素和块级元素的差别？行内块元素的兼容性使用？（IE8 以下）行内元素：会在水平方向摆列，不可以包含块级元素，设置 width 无效， height 无效 (能够设置 line-height) ，margin 上下无效， padd
2、ing 上下无效。块级元素：各占有一行，垂直方向摆列。重新行开始结束接着一个断行。兼容性： display:inline-block;display:inline;zoom:1;3.消除浮动有哪些方式？比较好的方式是哪一种？（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
3、）结尾处加 br 标签 clear:both 。总结：比较好的是第 3 种方式，简短方便。4.box-sizing 常用的属性有哪些？分别有什么作用？常用的属性： box-sizing: content-box border-box inherit;作用： content-box: 宽度和高度分别应用到元素的内容框 。在宽度和高度以外绘制元素的内边距和边框 (元素默认成效 )。border-box: 元素指定的 任何内边距和边框都将在已设定的宽度和高度内进行绘制。经过从已设定的宽度和高度分别减去边框和内边距才能获得内容的宽度和高度。5.Doctype 作用？标准模式与兼容模式各有什么区别 ?(
4、Q1) 见告阅读器的分析器用什么文档标准分析这个文档 。DOCTYPE 不存在或格式不正确会致使文档以兼容模式体现。(Q2) 标准模式的排版和 JS 运作模式都是以该阅读器支持的最高标准运转。在兼容模式中，页面以宽松的向后兼容的方式显示 ,模拟老式阅读器的行为以防备站点没法工作。6. HTML5为何只要要写？HTML5不鉴于SGML ，所以不需要对DTD进行引用;可是需要doctype来规范阅读器的行为（让阅读器依据它们应当的方式来运转）。而HTML4.01基于 SGML, 所以需要对 DTD 进行引用，才能见告阅读器文档所使用的文档种类。7.页面导入款式时，使用 link 和 import
5、有什么区别？（1）link 属于 XHTML 标签，除了加载 CSS 外，还可以用于定义 RSS, 定义 rel 连结属性等作用；而 import 是 CSS 供给的，只好用于加载 CSS;（ 2）页面被加载的时， link 会同时被加载，而 import 引用的 CSS 会等到页面被加载完再加载 ;（3） import 是 CSS2.1 提出的，只在 IE5 以上才能被辨别，而 link 是 XHTML标签，无兼容问题。总之， link 要优于 import 。8.介绍一下你对阅读器内核的理解？IE 阅读器的内核 Trident 、Mozilla 的 Gecko 、Chrome 的 Blin
6、k（ WebKit 的分支）、 Opera 内核原为 Presto，现为 Blink ；内核主要分红两部分：衬着引擎 (layout engineer 或 Rendering Engine) 和 JS 引擎衬着引擎：负责获得网页的内容 （HTML 、XML 、图像等等）、整理讯息（比如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。阅读器的内核的不一样对于网页的语法解说会有不一样，所以衬着的成效也不同样。全部网页阅读器、 电子邮件客户端以及其余需要编写、 显示网络内容的应用程序都需要内核。JS 引擎则：分析和履行 javascript 来实现网页的动向成效。 最开始衬着
7、引擎和 JS 引擎并无区分的很明确， 以后 JS 引擎愈来愈独立， 内核就偏向于只指衬着引擎。9.html5 有哪些新特征？如何办理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5 ？(Q1) HTML5 此刻已经不是 SGML 的子集，主假如对于图像， 地点，储存，多任务等功能的增添。(1)绘画 canvas;(2)用于媒介回放的 video 和 audio 元素 ;(3)当地离线储存 localStorage 长久储存数据，阅读器封闭后数据不丢掉 ;(4)sessionStorage 的数据在阅读器封闭后自动删除 ;(5)语意化更好的内容元素，比方 article
8、、footer 、header 、nav 、section; (6) 表单控件， calendar 、date 、 time 、 email 、url、 search;(7)新的技术 webworker, websocket, Geolocation;(Q2) IE8/IE7/IE6 支持经过 document.createElement 方法产生的标签， 能够利用这一特征让这些阅读器支持 HTML5 新标签， 阅读器支持新标签后，还需要增添标签默认的款式。 也能够直接使用成熟的框架、比方 html5shim ，10.简述一下你对 HTML 语义化的理解？用正确的标签做正确的事情。1. htm
9、l 语义化让页面的内容构造化，构造更清楚，便于对阅读器、搜寻引擎分析 ;2. 即便在没有款式 CSS 状况下也以一种文档格式显示， 而且是简单阅读的 ; 搜寻引擎的爬虫也依靠于 HTML 标志来确立上下文和各个重点字的权重，利于SEO;3. 使阅读源代码的人对网站更简单将网站分块，便于阅读保护理解。11# 常有兼容性问题？png24 位的图片在 iE6 阅读器上出现背景，解决方案是做成 PNG8.阅读器默认的 margin 和 padding 不一样。解决方案是加一个全局的margin:0;padding:0; 来一致。 IE6 双边距 bug: 块属性标签 float 后，又有横行的 mar
10、gin 状况下，在 ie6 显示 margin 比设置的大。 浮动 ie 产生的双倍距离 #box float:left; width:10px; margin:0 0 0 100px;这类状况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签款式控制中加入 _display:inline; 将其转变为行内属性。 (_这个符号只有 ie6 会辨别 ) 渐进识其余方式，从整体中渐渐清除局部。第一，奇妙的使用 “9”这一标志，将IE旅行器从全部状况中分别出来。接着，再次使用 “+将”IE8和IE7 、IE6分别开来，这样IE8已经独立辨别。css.bbbackground-co
11、lor:#f1ee18;/ 全部辨别/.background-color:#00deff9; /IE6、7、8 辨别/+background-color:#a200ff;/IE6、7辨别/_background-color:#1e0bd1;/IE6辨别 /IE下,能够使用获得惯例属性的方法来获得自定义属性,也能够使用getAttribute() 获得自定义属性 ;Firefox 下,只好使用 getAttribute() 获得自定义属性 . 解决方法 :一致经过 getAttribute() 获得自定义属性 . IE 下,even 对象有 x,y 属性 ,可是没有 pageX,pageY 属性
12、 ; 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:acti
13、ve 12.HTML5 的离线储藏，描绘一下 cookies ，sessionStorage 和 localStorage 的差别？cookie 在阅读器和服务器间往返传达。 sessionStorage 和 localStorage 不会sessionStorage 和 localStorage 的储存空间更大； sessionStorage 和 localStorage 有更多丰富易用的接口； sessionStorage 和 localStorage 各自独立的储存空间；CSS 一、 介绍一下 CSS 的盒子模型？（1）有两种， IE 盒子模型、标准 W3C 盒子模型； IE 的 con
14、tent 部分包含了 border 和 pading;（ 2）盒模型： 内容 (content) 、填补 (padding) 、界限 (margin) 、 边框(border).二、 CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？新增伪类有 那些？1.id 选择器（ # myid ）2.类选择器（ .myclassname ）3.标签选择器（ div, h1, p ）4.相邻选择器（ h1 + p ）5.子选择器（ ul li ）6.后辈选择器（ li a ）7.通配符选择器（ * ）8.属性选择器（ arel = external ）9.伪类选择器（ a: hover, li:
15、 nth - child ）可继承的款式：font-size font-family color, UL LI DL DD DT;不行继承的款式：border padding margin width height优先级就近原则，同权重状况下款式定义近来者为准 ;载入款式以最后载入的定位为准 ;优先级为 : !important id class tag ,important 比 内联优先级高三、 CSS3 新增伪类举例p:first-of-type 选择属于其父元素的首个 元素的每个 元素。p:last-of-type 选择属于其父元素的最后 元素的每个 元素。p:only-of-type
16、选择属于其父元素独一的 元素的每个 元素。p:only-child 选择属于其父元素的独一子元素的每个 元素。p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。:enabled :disabled 控制表单控件的禁用状态。:checked 单项选择框或复选框被选中。四、 如何居中 div ？如何居中一个浮动元素？水平居中：给 div 设置一个宽度，而后增添 margin:0 auto 属性divwidth:200px; margin:0 auto; 垂直居中：确立容器的宽高 ：如宽 500 高 300 的层设置层的外边距.div Width:500px height:3
17、00px;/ 高度能够不设Margin: -150px 0 0 -250px; position:relative; 相对定位background-color:pink;/ 方便看成效left:50%; top:50%;五、 列出 display 的值，说明他们的作用。 position的值， relative 和 absolute 定位 原点是1. block 象块种类元素同样显示。none 缺省值。象行内元素种类同样显示。inline-block 象行内元素同样显示，但其内容象块种类元素同样显示。list-item 象块种类元素同样显示，并增添款式列表标志。2.absolute 生成绝对定
18、位的元素，相对于 static 定位以外的第一个父元素进行定位。fixed （老 IE 不支持）生成绝对定位的元素， 相对于阅读器窗口进行定位。relative 生成相对定位的元素，相对于其正常地点进行定位。static 默认值。没有定位，元素出此刻正常的流中（忽视top, bottom, left, right z-index申明）inherit规定从父元素继承position属性的值。 六、CSS3有哪些新特征# ？CSS3 实现圆角（ border-radius:8px ），暗影（ box-shadow:10px ），对文字加殊效（ text-shadow 、）线性渐变（ gradien
19、t ）旋转（ transform ）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)skew(-9deg,0deg);/ 旋转 ,缩放 ,定位 ,倾斜增添了更多的 CSS 选择器 多背景 rgba 七、 一个满屏 品字布局 如何设计八、 为何要初始化 CSS 款式。因为阅读器的兼容问题，不一样阅读器对有些标签的默认值是不一样的，假如没对CSS初始化常常会出现阅读器之间的页面显示差别。初始化款式会对 SEO 有必定的影响，但鱼和熊掌不行兼得，但力争影响最小的状况下初始化。最简单的初始化方法就是： padding: 0; ma
20、rgin: 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/1.5tahoma, arial, 5b8b4f53; h1, h2, h3, h4, h5, h6 font-size:100%; address,
21、 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; legend color:#000; fieldset, i
22、mg border:0; button, input, select, textarea font-size:100%; table border-collapse:collapse; border-spacing:0; 九、 absolute 的 containing block 计算方式跟正常流有什么不一样？十、 position 跟 display 、 margincollapse 、overflow 、 float 这些特征互相叠加后会 怎么样？十一、 对 BFC 规范的理解？W3C CSS 2.1 规范中的一个观点 ,它决定了元素如何对其内容进行定位 ,以及与其余元素的关 系和互相作
23、用。十二、 css 定义的权重以下是权重的规则： 标签的权重为 1，class 的权重为 10 ，id 的权重为 100 ，以下例子是演示各样定义的权重值：/权重为1/div / 权重为10/.class1 / 权重为100 /id1 / 权重为100+1=101 /id1 div / 权重为10+1=11 /.class1 div / 权重为10+10+1=21 / .class1 .class2 div假如权重同样，则最后定义的款式会起作用，可是应当防止这类状况出现十三、 解说下浮动和它的工作原理？消除浮动的技巧十四、 用过媒体查问，针对挪动端的布局吗？十五、 使用 CSS 预办理器吗？喜
24、爱那个？SASS十六、 假如需要手动写动画，你以为最小时间间隔是多久，为何？多半显示器默认频次是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为：1/60 1000ms 16.7ms十七、 display:inline-block 什么时候会显示空隙，如何解决？移除空格、使用 margin 负值、使用 font-size:0 、letter-spacing 、word-spacingJavaScript介绍 js 的数据种类ECMAScript 有 5 种原始种类（ primitive type ），即 Undefined 、 Null 、Boolean 、Number 和Stri
25、ng 。js 有哪些内置对象？数据封装类对象（五种）： Object 、Array 、Boolean 、Number 和 String ；其余对象： Function 、Arguments 、Math 、Date 、RegExp 、Errorthis 对象的理解this 老是指向函数的直接调用者（所谓目前对象，而非间接调用者）假如有 new 重点字， this 指向 new 出来的那个对象；在事件中， this指向触发这个事件的对象，特别的是IE中的attachEvent中的this老是指向全局对象Window 。eval （）是做什么的？把对应的字符串分析成 JS 代码并运转；应当防止使用
26、eval- 不安全，特别耗性能（ 2 次，一次分析成 js 语句，一次履行）。由 JSON 字符串变换为 JSON 对象的时候能够用 eval ，var obj =eval( ( +str+ ) )。DOM 如何增添、移除、挪动、复制、创立和查找节点创立新节点创立一个 DOM 片段 createDocumentFragment()创立一个详细的元素 createElement()创立一个文本节点 createTextNode()增添、移除、替代、插入 appendChild() removeChild()replaceChild() insertBefore()在已有的子节点前插入一个新的子节
27、点：？查找经过标署名称 ： getElementsByTagName(). 经过元素的 Name 属性的值 (IE 容错能力较强，会获得一个数组，此中包含 id等于 name 值的 ) ：getElementsByName(). 经过元素 Id，独一性： getElementById()null 和 undefined 的差别？null 是一个表示 ”无”的对象，转为数值时为 0；undefined 是一个表示 ”无 ”的原始值，转为数值时为 NaN 。undefined ：（ 1）变量被声了然，但没有赋值时，就等于 undefined 。（ 2) 调用函数时，应当供给的参数没有供给，该参数等
28、于 undefined 。（3）对象没有赋值的属性，该属性的值为 undefined 。（4）函数没有返回值时，默认返回 undefined 。null ：（1） 作为函数的参数，表示该函数的参数不是对象。（2） 作为对象原型链的终点。new 操作符详细干了什么呢 ?（1）创立一个空对象，而且 this 变量引用该对象，同时还继承了该函数的原型。（2）属性和方法被加入到 this 引用的对象中。（3）新创立的对象由 this 所引用，而且最后隐式的返回 this 。JSON 的认识？JSON(JavaScript Object Notation) 是一种轻量级的数据互换格式。它是鉴于 JavaScript 的一个子集。数据格式简单 , 易于读写 , 占用带宽小。格式：采纳键值对，比如： age: 12, name: backcall() 和 apply() 的差别和作用？apply() 函数有两个参数： 第一个参数是上下文， 第二个参数是参数构成的数组。假如上下文是 null ，则使用全局对象取代。 如：function.apply(this,1,2,3);call() 的第一个参数是上下文，后续是实例传入的参数序列。 如：function.call(this,1,2,3);如何获得 UA ？什么是 ua ？function whatBrowser()
