web前端面试之基础面试题（一）（含答案）

前端面试题（一）

今天我们整理一下前端面试题（15个），此面试题答案自己书写总结，有问题或疑问请指出问题，谢谢！

1.HTML中行内元素与块元素的区别？并举例？行内元素怎么转化为块级元素?

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表：

块级元素	说明
div	最典型的块元素
p	表示段落
h1-h6	表示1-6级标题（默认加粗）
br	表示换行
ol	有序列表
ul	无序列表

**

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

行内元素	说明
a	超链接
span	常用行级
strong	加粗，强调
b	加粗，不强调
em	斜体，强调
i	斜体，不强调
img	图片
input	输入框
select	下拉列表

行元素转换为块级元素方式：display：block；

2.title和alt有什么区别?

• alt是图片加载失败时，显示在网页上的替代文字；
• title是鼠标放上面时显示的文字。
• alt是img必要的属性，而title不是。

3.请阐述css里有哪些选择器？分别说说它们的优先级？

• 标签选择器： 一个HTML文件由很多不同的标签组成，利用标签选择器可以统一设置使用某类标签定义的元素的外观。(如：body,div,p,ul,li)
• 类选择器（class）： 使用类选择器可以相同或不同的标签分类设置不同的样式。定义类选择器时，需要在类名称前面加一个“.”。(如：class=“head”,class=“head_logo”)
• id选择器： id选择器用来对单个元素设置单独的样式，在同一html文件中，id不能重复。定义id选择器时，需要在id名称前面加一个#号。多用于写js代码使用。(如：id=“name”,id=“name_txt”)
• 通用选择器：通用选择器是一种特殊类型的选择器，它用星号*来表示选择器是名称，可以定义所有网页元素的显示格式。(如：*号)
• 后代选择器： (如：#head .nav ul li 从父集到子孙集的选择器)
• 群组选择器：{ div,span,img {color:Red} 即具有相同样式的标签分组显示
• 继承选择器：(如：div p,注意两选择器用空格键分开)
• 伪类选择器：(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
• 子选择器： (如：div>p ,带大于号>)；

优先级排序：行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

4.transform？animation？区别?animation-duration？

• Transform ：它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
• Animation：作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.
• animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

5.nth-of-type 与 nth-child 区别?
例子：

<ul> 
   <p>111p> 
   <span>222span> 
   <li>1li> 
   <li>2li> 
   <li>3li> 
 ul>

• li:nth-of-type(2):表示ul下的第二个li元素；
• li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）；

建议一般使用nth-of-type，不容易出问题。

6. :before 和 ::before 区别?

• 单冒号(:)用于CSS3伪类，
• 双冒号(::)用于CSS3伪元素。
  对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的。

7.px/em/rem有什么区别？浏览器默认字体大小多少？

• em的值并不是固定的；
• em会继承父级元素的字体大小。使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
• rem是相对于浏览器进行缩放的。1rem默认是16px，在响应式布局中，一个个除来转换成rem，太麻烦，所以重置rem
• body{font-size=62.5% } 此时1rem = 10px;若是12px则是1.2rem.
• 浏览器默认字体大小是16px

8.图片和文字在同一行显示?

• 在css中给div添加上“vertical-align:middle”属性。
• 分别把图片和文字放入不同的div中，然后用“margin”属性进行定位，就可以使他们显示在同一行。
• 把图片设置为背景图片。

9.怎么禁止事件冒泡?

event.stopPropagation()

10.a标签中 active hover link visited 正确的设置顺序是什么?
a标签的link、visited、hover、active是有一定顺序的

a:link a:visited a:hover a:active

10.谈一谈你对闭包的理解？
闭包说的通俗一点就是打通了一条在函数外部访问函数内部作用域的通道。正常情况下函数外部是访问不到函数内部作用域变量的，表象判断是不是闭包:函数嵌套函数,内部函数被return 内部函数调用外层函数的局部变量。

• 优点：可以隔离作用域，不造成全局污染；
• 缺点：由于闭包长期驻留内存，则长期这样会导致内存泄露；
• 如何解决内存泄露：将暴露全外部的闭包变量置为null；
• 适用场景：封装组件，for循环和定时器结合使用,for循环和dom事件结合

11.什么原型 原型链？
原型：

• js中，万物皆对象，每一个对象都拥有自己的属性；
• 在js中每个对象都有一个与他关联的对象，叫做原型对象，每次获取对象属性都是一次查询过程，在对象的自由属性中找不到就会去查它的原型对象。

原型链：

• 原型连成一条链，js在查找属性过程中，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中再查不到，就回到原型对象的原型中查找，也就是按原型链查找，直到查找原型链的顶端–object；

12.instanceof 与 typeof() 的区别？

• instanceof ：判断对应的变量类型,(是否为对应的类，实例化出来的对象)，用于检测对应的数据类型；返回的值为 t（true） 或 f（false）；
• typeof() ：返回的是数据类型；

13.说一下ES6新增特性?

• ES6新增特性常用的主要有：let/const,箭头函数，模板字符串，解构赋值，模块的导入(import)和导出(export
  default/export),Promise,还有一些数组字符串的新方法。

14.说一下JS数组常用方法（至少6个）

• 在开发中，数组使用频率很频繁，JS数组常用方法有:push,pop,unshift,shift,splice,join,concat,forEach,filter,map,sort,some,every好多，不过都是平时开发中很常用的方法,大家可以补充一点儿es6的。

15.说一下JS数据类型有哪些？

• 基本数据类型：number,string,Boolean,null,undefined,symbol（ES6新增）
• 复合类型：
  Object,function

后续会继续更新相关前端知识及面试题！！！！谢谢大家的预览！