面试题讲解：
第一题：行内元素有哪些？块级元素有哪些？有哪些css盒模型？
行内元素举例：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的区别是？
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属性的区别是什么？
1. alt是html标签的属性，而title既是html标签，又是html属性
2.关于title
title作为标签时，网页的标题就是写在这对标签之内的。
title作为属性时，可以为元素提供额外说明信息。它可以用在任何标签上，例如img标签和a标签。
3. alt属性只能用在图像中，用于网页中图片无法正常显示时给用户提供文字说明。alt是替代图像作用而不是提供额外说明文字的。（<input type="image" />）
第四题：解释css sprites，如何使用，以及它的优缺点
1.css sprites(精灵图):
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时， 载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.基本原理：
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
3.优点：
1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
4.缺点：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，
最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；
3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，
又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
第五题：JavaScript的typeof返回哪些数据类型？
undefined
string
boolean
number(NaN)
symbol(ES6)
Object
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("分隔符"); //返回由指定分隔符连接的字符串
------------------------------------------------------------------------------------------------------------------------------------
来源：https://www.cnblogs.com/feihu1024/p/11521097.html