前端面试题

面试题讲解：
第一题：行内元素有哪些？块级元素有哪些？有哪些css盒模型？（第7天中讲过）

行内元素举例：a、strong、b、em、i、del、u、ins、span、...
块级元素举例：h1~h6、p、div、ul、ol、l 、...
行内块元素举例：img、input、td、...

css盒模型：
1.盒模型概念：所谓盒模型就是把所有HTML元素均看作一个个矩形盒子，该盒子由四个部分组成：内容(content:width / height)、内边距(padding)、边框(border)、外边距(margin)

css盒模型举例：
1.W3C标准盒模型（content-box）： 盒子尺寸 = width
2.IE标准盒模型（border-box）： 盒子尺寸 = width + padding + border



第二题：css引入的方式有哪些？link和@import的区别是？（第7天中讲过）

1.CSS的三种引入方式：
1.内联样式： 通过HTML元素的style属性来定义样式

2.内部样式： 将CSS代码集中于HTML文档的head元素中，并使用style元素定义样式

3.外部样式表：　将所有的样式定义放在一个或多个以.css为扩展名的外部样式表文件中，通过link元素将其链接到HTML文档中

　　　　　　2.link和@import的区别：
link的使用：　　　　<link rel="stylesheet" type="text/css" href="index.css">
@import的使用： <style type="text/css"> @import url('index.css'); </style>

1.属性不同: link是html提供的标签，不仅可以加载css文件，还能定义RSS、rel 连接属性等。而@import是css中的语法规则

2.加载顺序区别： 加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。

3.兼容性区别： @import是CSS2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML元素，不存在兼容性问题。

4.可控制性区别： link支持使用javascript控制DOM去改变样式；而@import不支持。

5.优先级区别： @import可以在CSS文件中再次引入其他样式表。

第三题：标签上title和alt属性的区别是什么？(第11天中讲过)

1. alt是html标签的属性，而title既是html标签，又是html属性

2.关于title
title作为标签时，网页的标题就是写在这对标签之内的。
title作为属性时，可以为元素提供额外说明信息。它可以用在任何标签上，例如img标签和a标签。

3. alt属性只能用在图像中，用于网页中图片无法正常显示时给用户提供文字说明。alt是替代图像的而不是提供额外说明文字的。（<input type="image" />），但对于背景图无效。



第四题：解释css sprite，如何使用，以及它的优缺点

1.css sprite(精灵图):
CSSSprite在国内很多人叫css精灵图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，
　　　　 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

2.基本原理：
CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。

　　　　 3.具体用法：

　　　　　　　　.sprite-test {
　　　　width: 300px;
　　　　height: 300px;
　　　　border: 1px solid #333;
　　　　background-image: url("imagePath");
　　　　background-repeat: no-repeat;　　/*(repeat , no-repeat, repeat-x, repeat-y)*/
　　　　background-position: 0px 0px;　　/*(horizontal， vertical)，可选值(top, right, bottom, left, center)*/
　　　　background-attachment: fixed;　　/*(scroll, fixed)*/
　　　　　　　　　　　background-size：auto; 　　　　　　/*设置背景图像的尺寸大小，默认值auto*(倍图)/
　　　}
　　　　　　　　　注意点1：可以使用属性简写形式：background: url("logo.png") no-repeat 0px 0px fixed;

　　　　　　　　注意点2：使用精灵图时，background-position 指定的坐标值一般都小于0

3.优点：
1.利用CSS Sprite能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprite最大的优点，也是其被广泛传播和应用的主要原因；
2.CSS Sprite能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合中的图片命名就可以了，不需要对每一个子元素进行命名，从而提高了网页的制作效率。
4.更换风格方便，只需要在一张或少数几张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

4.缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，
最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

2.CSS Sprite在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；

3.CSS Sprite在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，
又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。



第五题：JavaScript的typeof返回哪些数据类型？（第11天中讲过）
　　　　　　typeof运算符可以判断表达式的类型，根据表达式返回七种结果：number,string,boolean,undefined,object,function,symbol
　　　　　　typeof的用法有两种:
　　　　　　1.typeof a
　　　　　　2.typeof(a)
　　　　　　对于数字来说，typeof返回number，这里数字包括整数和浮点数，一律返回number
　　　　　对于字符串，typeof返回string
　　　　　　对于布尔值，typeof返回boolean
　　　　　　对于对象，typeof返回object，正是由于typeof运算符对于任何对象都统一返回object，因此我们无法知道某个对象是否是数组，或者说是对象的一个实例。instanceof运算符用来弥补这一缺点，比如var a=new Array();console.log(a instanceof Array);返回的是true
　　　　　　对于未定义的值和不存在的对象，typeof返回undefined
　　　　　　对于symbol，typeof返回symbol
　　　　　　对于函数，typeof返回function

第六题：数组方法pop()、push()、unshift()、shift()

var arr = [first, 1, 2, 3, last];

1.添加元素（可以添加多个元素，返回值为添加后的数组长度）
arr.push(e1, e2, ...); //末尾追加
arr.unshift(e1, e2, ...); //首位添加

2.删除元素(返回被删除的元素)；
arr.shift(); //首位删除
arr.pop(); //末尾删除

3.删除指定位置的元素：
arr.splice(start,count)； //接受两个参数，start指定删除的起始位置，count指定删除的个数，返回被删除元素的集合

4.截取数组：
arr.slice(start,end)； //从start开始截取end个元素，返回截取到的子数组

5.数组转字符串:
arr.jion("分隔符"); //返回由指定分隔符连接的字符串

　　
　　第七题：闭包
　　　　1.什么是闭包：
　　　　　　1.JavaScript高级程序设计（第3版）：闭包是指有权访问另一个函数作用域中的变量的函数。
　　　　　　2.MDN：JavaScript中的函数会形成闭包。 闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量
　　　　　　3.百度百科：闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
　　　　　　4.维基百科：在计算机科学中，闭包（Closure）是词法闭包（Lexical Closure）的简称，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即使已经离开了创造它的环境也不例外。所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。

　　　　2.示例：

　　　　　　1.闭包示例：
　　　　　　　　<script>
　　　　　　　　　　var mObject = {
　　　　　　　　　　　　name: "ashe",
　　　　　　　　　　　　fn: function() {
　　　　　　　　　　　　　　var mObjectPoint = this
　　　　　　　　　　　　　　return function() {
　　　　　　　　　　　　　　　　return mObjectPoint.name;
　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　　　var fnPoint = mObject.fn();
　　　　　　　　　　var result = fnPoint();
　　　　　　　　　　console.log(result)
　　　　　　　　</script>

　　　　　　2.块级作用域示例：
　　　　　　　　var btns = document.querySelectorAll("button");
　　　　　　　　var span = document.querySelector("span");

　　　　　　　　for (let i = 0; i < btns.length; i++) {
　　　　　　　　　　btns[i].onclick = function() {
　　　　　　　　　　　　span.innerText = i;
　　　　　　　　　　}
　　　　　　　　}

　　　　3.为什么要使用闭包：
　　　　　　1.创建块级作用域，净化全局作用域
　　　　　　2.将函数与其所操作的某些数据（环境）关连起来

　　　　4.闭包的副作用：
　　　　　　1.内存的占用
　　　　　　2.只能取到外层函数变量的最终值

　　5.引述：
　　　　在javascript中没有块级作用域，一般为了给某个函数申明一些只有该函数才能使用的局部变量时，我们就会用到闭包，这样我们可以很大程度上减少全局作用域中的变量，净化全局作用域。

　　　　闭包避免了使用全局变量，此外，闭包允许将函数与其所操作的某些数据（环境）关连起来。这一点与面向对象编程是非常类似的，在面对象编程中，
对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

　　　　每个函数的执行，都会创建一个与该函数相关的函数执行环境，或者说是函数执行上下文（context）。这个执行上下文中有一个属性 scope chain（作用域链指针），这个指针指向一个作用域链结构，作用域链中的指针又都指向各个作用域对应的活动对象。正常情况，一个函数在调用开始执行时创建这个函数执行上下文及相应的作用域链，在函数执行结束后释放函数执行上下文及相应作用域链所占的空间。

　　　　使用闭包有如上的好处，当然这样的好处是需要付出代价的，代价就是内存的占用。

　　　　但是闭包的情况就有点特殊了，由于闭包函数可以访问外层函数中的变量，所以外层函数在执行结束后，其作用域活动对象并不会被释放（注意，外层函数执 行结束后执行环境和对应的作用域链就会被销毁），而是被闭包函数的作用域链所引用，直到闭包函数被销毁后，外层函数的作用域活动对象才会被销毁。这也正是 闭包要占用内存的原因。

　　　　这个副作用是闭包函数只能取到外层函数变量的最终值。




------------------------------------------------------------------------------------------------------------------------------------