前端面试题

最新推荐文章于 2021-07-09 15:36:47 发布

搬运工9527

最新推荐文章于 2021-07-09 15:36:47 发布

阅读量900

点赞数

分类专栏：前端文章标签：前端面试题

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

https://blog.csdn.net/dkh_321/article/details/79311446

```
   div和span的区别？
```

div是块级标签，span是行级标签

在html中，position取值有哪几种，默认值是什么？
取值：static、relative、fixed、absolute
默认值：static
前端页面由哪三层构成，分别是什么？作用是什么？
前端页面构成：结构层、表示层、行为层

结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

如何居中一个浮动元素？
方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。

方式2：需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
<styletype=“text/css”>

让层垂直居中于浏览器窗口

请简述HTML和XHTML最重要的4点不同？
不同：
XHTML要求正确嵌套
XHTML 所有元素必须关闭
XHTML 区分大小写
XHTML 属性值要用双引号
XHTML 用 id 属性代替 name 属性
XHTML 特殊字符的处理
页面布局中常听说的“结构与表现”分离，“结构”是指？“表现”是指？
“结构”：HTML
“表现”：CSS
怎么样从web前端方面优化性能？至少列举5点？

```
   HTML部分
```

u 语义化HTML：好处在于可以使代码简洁清晰，支持不同设备，利于搜索引擎，便于团队开发；
u 减少DOM节点：加速页面渲染；
u 给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；
u 防止src属性和link的href属性为空：当值为空时，浏览器很可能会把当前页面当成其属性值加载；
u 正确的闭合标签：如避免使用

，浏览器会多一个将它解析成<div></div>的过程；
u 链接为目录或首页的地址后面加”/”，如http://www.5icool.org/；
u 用LINK而不用@import方式导入样式；
u 样式放在页头，JS放在页尾；
u 缩小favicon.ico并缓存；

```
   CSS部分
```

u 避免使用CSS Expressions(CSS表达式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
u 避免使用CSS Filter（CSS滤镜）；
u 使用CSS缩写，减少代码量；
u 通过CSSSprites把同类图片合成一张，减少图片请求；
u 减少查询层级：如.header .logo要好过.header .top .logo；
u 减少查询范围：如.header>li要好过.header li；
u 避免TAG标签与CLASS或ID并存：如a.top、button#submit；
u 删除重复的CSS；

```
   Javscript部分
```

u 尽量少用全局变量；
u 使用事件代理绑定事件，如将事件绑定在body上进行代理；
u 避免频繁操作DOM节点；
u 不使用EVAL；
u 减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；
u 类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；
u 对字符串进行循环操作，譬如替换、查找，应使用正则表达式；
u 删除重复的JS；

```
   服务器部分
```

u 尽量合并CSS、JS文件，或将其直接写在页面上，减少HTTP请求；
u 压缩CSS、JS文件，缩短文件传输时间；
u 避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；
u 一般要求减少DNS查询次数，如同一个页面的请求资源尽量少的使用不同的主机名，这可以减少网站并行下载的数量，但很多网站为了加速下载资源其实是特意用了多个主机名，这里要做一个权衡；
u 使用CDN加速，使用户从离自己最近的服务器下载文件；
u 减少Cookie的大小，使用无cookie的域，客户端请求静态文件的时候，减少 Cookie 的反复传输对主域名的影响；
u 为文件头指定Expires，使内容具有缓存性；
u 使用gzip压缩内容；

JavaScript中哪些方法获取元素?
getElementById
getElementsByClassName
getElementsByTagName
getElementsByName
描述CSS hack技巧?
条件注释：仅适用于IE
特定符号：适用于能识别特定符号的浏览器
内核符号：针对不同浏览器内核

HACK概念：
不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,

10.用JS截取字符串，asdfgh，要fgh;?
方式1： ‘asdfgh’.substr(3,3)
方式2： ’asdfgh’.substring(3,5) 或者 ‘asdfgh’.substring(3)

11.IE6的双倍边距BUG指的是什么？怎么解决？
双边距：当块级元素有浮动样式的时候，给元素添加margin-left和margin-right样式，在ie6下就会出现双倍边距。

解决方案：给当前元素添加样式，使当前元素不为块，如：display:inline;display:list-item

如果制作一个访问量很大的网站，对css，js和图片应该怎么处理?
方法1：资源文件按模块进行放置，有利于团队开发
方法2：图片尽量采取聚合技术
方法3：精简压缩css和js文件，减少文件大小
方法4：类库、媒体使用CDN加速，减轻服务器压力

13.述ajax原理，什么是同步异步(主观题，答案不唯一)?
Ajax的工作原理：相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

同步异步：
14. 平时有没有使用xml和json，在ajax交互中，哪一种更易于开发和维护，js中怎么序列化JSON字符串?

有，json相比xml可读性和可扩张性好、编码及解码难度较低、在数据交互中带宽占用少，并且在当下是最流行的数据交互格式。

序列化JSON字符串：eval() 或者 JSON.parse()

JS怎么创建一个类?
方式1 : var obj = new Object();
方式2 : var obj = {};

16.JS的typeof返回哪些数据类型?
string、number、object、boolean、function、undefined

HTTP请求有哪几种？
post、get
完成下面布局（兼容IE6-10以及FF、谷歌、苹果浏览器）?

<htmllang=“en”>

19.闭包是什么？有什么特性？请简单书写一个简单事例？
必包：闭包是指可以包含自由（未绑定到特定对象）变量的代码块；这些变量不是在这个代码块内或者任何全局上下文中定义的，而是在定义代码块的环境中定义（局部变量）

特性：闭包是能够读取其他函数内部变量的函数，即在外面可以调用函数中的函数的变量，其实他就是将函数内外部连接起来的桥梁

事例：
<scripttype=’text/javascript’>
function a(){
var i = 99;
iAdd = function(){
i++;
}
function b(){
alert(i);
}
return b;
}
var result = a();
result();//结果为99
iAdd();
result();//结果为100

20. 解释jsonp的原理，以及为什么不是真正的ajax（主观题）？

JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

js延迟加载的方式有哪些？
defer和async、动态创建DOM方式（用得最多）、按需异步载入js
对WEB标准以及W3C的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
xhtml和html有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）一般为严格过度基于框架的html文档
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug
行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding

26.CSS引入的方式有哪些?link和@import的区别是?
内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可

27.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
标签选择符类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高

28.前端页面有哪三层构成，分别是什么？作用是什么？
结构层 Html 表示层 CSS 行为层 js
29.css的基本语句构成是？
选择器{属性1:值1;属性2:值2;……}
30.你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
Ie(Ie内核)火狐（Gecko）谷歌（webkit） opear(Presto)
31.写出几种IE6 BUG的解决方法？
1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
32.标签上title与alt属性的区别是什么？
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息
33.描述css reset的作用和用途？
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
34.解释css sprites，如何使用？
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
35.浏览器标准模式和怪异模式之间的区别是什么？
盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
36.你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
37.什么是语义化的HTML？
直观的认识标签对于搜索引擎的抓取有好处
38.清除浮动的几种方式，各自的优缺点？
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）
2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
39.javascript的typeof返回哪些数据类型？
Object number function boolean underfind
40.例举3种强制类型转换和2种隐式类型转换？
强制（parseInt,parseFloat,number）
隐式（== – ===）
41.split() join() 的区别？
前者是切割成数组的形式，后者是将数组转换成字符串
42.数组方法pop() push() unshift() shift()？
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
43.14.JS中的call()和apply()方法的区别？
例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4);
注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。
function add(a,b)
{
alert(a+b);
}

function sub(a,b)
{
alert(a-b);
}

add.call(sub,3,1);
44.IE和DOM事件流的区别？
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题
45.IE和标准下有哪些兼容性的写法？
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
46.ajax请求的时候get 和post方式的区别？
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
47.call和apply的区别？
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
48.ajax请求时，如何解释json数据？
使用eval parse 鉴于安全性考虑使用parse更靠谱

49.new操作符具体干了什么呢?
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

var obj = {};
obj.proto = Base.prototype;
Base.call(obj);
50.写一个获取非行间样式的函数？
functiongetStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
51.事件委托是什么？
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
http://www.webasily.com/?p=78 例子可见此链接
52.闭包是什么，有什么特性，对页面有什么影响？
闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）
53.如何阻止事件冒泡和默认事件？
canceBubble return false
54.添加删除替换插入到某个接点的方法？
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
55.解释jsonp的原理，以及为什么不是真正的ajax？
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
56.javascript的本地对象，内置对象和宿主对象？
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
57.document load 和document ready的区别？
Document.onload 是在结构和样式加载完才执行js
Document.ready原生种没有这个方法，jquery中有 $().ready(function)
58.””和“=”的不同？
前者会自动转换类型
后者不会
59.javascript的同源策略？
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
60.编写一个数组去重的方法？
function oSort(arr)
{
varresult ={};
varnewArr=[];
for(vari=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
returnnewArr
}
61.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
62.行内元素有哪些？块级元素有哪些？空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：

鲜为人知的是：
63.CSS的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了border 和 pading;
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).
64.link 和@import 的区别是?
（1）、link属于XHTML标签，而@import是CSS提供的;
（2）、页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）、import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）、link方式的样式的权重高于@import的权重.
65.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = “external”]）
9.伪类选择器（a: hover, li: nth - child）
可继承： font-sizefont-family color, UL LI DL DD DT;
不可继承：border paddingmargin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled、:disabled控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
66.如何居中div,如何居中一个浮动元素?
· 给div设置一个宽度，然后添加margin:0 auto属性
· div{
· width:200px;
· margin:0 auto;
· }
· 居中一个浮动元素
· 确定容器的宽高宽500 高 300 的层
· 设置层的外边距
·
· .div {
· Width:500px ; height:300px;//高度可以不设
· Margin: -150px 0 0 -250px;
· position:relative;相对定位
· background-color:pink;//方便看效果
· left:50%;
· top:50%;
· }
67.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
IE6双边距bug:块属性标签float后，又有横行的margin情况下，在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
      .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff\9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/

      }

IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
IE下,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 {}
68.html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
· HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
· * 绘画 canvas 元素
·
· 用于媒介回放的 video和 audio 元素
·
· 本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
· sessionStorage 的数据在浏览器关闭后自动删除
·
· 语意化更好的内容元素，比如 article、footer、header、nav、section
·
· 表单控件，calendar、date、time、email、url、search
·
· CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器多背景 rgba
·
· 新的技术webworker,websockt, Geolocation
· 移除的元素
· 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
·
· 对可用性产生负面影响的元素：frame，frameset，noframes；
·
· * 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
· 可以利用这一特性让这些浏览器支持HTML5新标签，
·
· 浏览器支持新标签后，还需要添加标签默认的样式：
·
· * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
·
69.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

首先划分成头部、body、脚部；。。。。。

实现效果图是最基本的工作，精确到2px；

与设计师，产品经理的沟通和项目的参与

做好的页面结构，页面重构和用户体验

处理hack，兼容、写出优美的代码格式

针对服务器的优化、拥抱 HTML5。
70.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？

使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。

轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解这些框架的功能、性能、设计原理）

Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。

轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解这些框架的功能、性能、设计原理）

Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）

JavaScript原型，原型链 ? 有什么特点？
- 原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
- 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
- JavaScript的数据对象有那些属性值？
writable：这个属性的值是否可以改。
configurable：这个属性的配置是否可以删除，修改。
enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value：属性值。
- 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找他的Prototype对象是否有这个属性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等价于Object.create(Person);
}
```
    functionobject(old) {
```
```
     function F() {};
```
```
     F.prototype =old;
```
```
     return new F();
```
```
    }
```
```
var newObj = object(oldObject);
```

71.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。

static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left,right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。
72.页面重构怎么操作？
编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
73.语义化的理解？
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
74.HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

75.为什么要初始化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/1.5tahoma, 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; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
76.(写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：

、

   < div id="header">
   < h1>标题< /h1>
   < h2>专注Web前端技术< /h2>
   < /div>

· 语义 HTML 具有以下特性：
· 文字包裹在元素中，用以反映内容。例如：
· 段落包含在

元素中。
· 顺序表包含在

元素中。
· 从其他来源引用的大型文字块包含在
元素中。
· HTML 元素不能用作语义用途以外的其他目的。例如：
·
包含标题，但并非用于放大文本。
·
包含大段引述，但并非用于文本缩进。
· 空白段落元素 (
) 并非用于跳行。
· 文本并不直接包含任何样式信息。例如：
· 不使用或等格式标记。
· 类或 ID 中不引用颜色或位置。
77.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
22.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{
}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
78.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
23.写一个通用的事件侦听器函数
`// event(事件)工具集，来源：https://github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != ‘function’) {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式来绑定事件
// 参数：操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type,handler, false);
} else if (element.attachEvent) {
element.attachEvent(‘on’ + type,function() {
handler.call(element);
});
} else {
element[‘on’ + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type,handler, false);
} else if (element.datachEvent) {
element.detachEvent(‘on’ + type,handler);
} else {
element[‘on’ + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while © {
ev = c.arguments[0];
if (ev && Event ==ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
24.99%的网站都需要被重构是那本书上写的？

网站重构：应用web标准进行设计（第2版）
79.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.

渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
80.Node.js的适用场景？
高并发、聊天、实时消息推送

2018前端面试题链接

2017年前端面试题整理汇总100题
https://blog.csdn.net/weixin_39927080/article/details/79206320

搬运工9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题

https://blog.csdn.net/dkh_321/article/details/79311446 div和span的区别？div是块级标签，span是行级标签在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute默认值：static前端页面由哪三层构成，分别是什么？作用是什么？前端...
复制链接

扫一扫