遇到一份面试题，感觉还不错，分享给大家，互相学习。
1、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
当为了让多个div在同一行进行显示，我们会给他们设置浮动属性。
但是当父容器内的所有的子元素全都浮动之后，将会出现父盒子塌陷的问题。此时我们需要清除浮动。
清除浮动的方如下：
方式一:使用overflow属性来清除浮动
.父容器{
overflow:hidden;
}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
方式二:使用额外标签法
.新增容器{
clear:both;
}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.父容器:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
2、::before 和:before中双冒号和单冒号有什么区别？解释一下作用。
单冒号(:) 用于CSS3伪类；
双冒号(::) 用于CSS3伪元素。
伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。
那么对于CSS2之前已有的伪元素，比如:before，单冒号和双冒号的写法::before作用是一样的
3、css选择器有哪些？优先级如何？
常用选择器：
1、标签选择器 li{}
2、类选择器（class选择器）.className{}
3、id选择器 #div{}
4、通用选择器*{} 优先级最低
5、并集选择器 li,.first{}
6、交集选择器li.first{}
7、后代选择器 div span{}
8、子代选择器 写法：选择器1>选择器2>...>选择器n，用>分隔
优先级比较：
1、CSS生效的第一原则是近者优先，即哪个选择器作用于最里层标签，则这个选择器生效；
2、当选择器作用于同一层时，可以根据优先级权重进行累加计算。id选择器100>class选择器10>标签选择器1
3、当选择器作用于同一层且优先级权重相等时，则写在后面的选择器生效。
4、！可以提高选择器的优先级。
4、请写出一个安全的网页字体序列
p { font-family:"Times New Roman",Georgia,Serif; }
5、js获取到页面中所有的checkbox？（不使用第三方框架）
var inputs = document.getElementsByTagName("input");
var checkboxs = [];
for(var i=0; i<inputs.length; i++){
if(inputs[i].type=="checkbox" && inputs[i].checked){
checkboxs.push(inputs[i])
console.log(checkboxs);
}
}
6、分别使用原生JS和jQuery定义一个函数，功能为去除数组中的重复项。
var arr = [1,2,2,3,3,3,4,5,6];
function func (arr){
console.log(arr);
var newArr = new Array;
newArr.push(arr[0]);
for (var i=0;i<=arr.length;i++) {
if (newArr.indexOf(arr[i])==-1) {
newArr.push(arr[i]);
}
}
document.write(newArr);
}
func(arr);
7、下面这个ul，如何点击每一列的时候alert其索引值?（不使用第三方库）
<ul id='test'>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
1、【使用闭包解决上述问题】
解决原理：函数具有自己的作用域，在for循环转一次创建一个自执行函数，
在每个自执行函数中，都有自己独立的i，而不会被释放掉。
所以for循环转完以后，创建的5个自执行函数的作用域中，分别存储了5个
不同的i变量，也就解决了问题。
var lis = document.getElementsByClassName("li");
for(var i=0; i<lis.length; i++){
!function(i){ lis[i].onclick = function(){ alert(i);
} }(i); }
2、【使用let解决】
解决原理：let具有自己的块级作用域，所以for循环转一次会创建一个块级作用域；
var lis = document.getElementsByClassName("li");
for(let i=0; i<lis.length; i++){
lis[i].onclick = function(){ alert(i);
} }
3、【使用this解决原理】
出错的原因在于全局变量i在多次循环之后被污染。那么在点击事件中，就可以不使用i变量，而是使用this代替lis[i]，这样不会出现错误
var lis = document.getElementsByClassName("li");
for(var i=0; i<lis.length; i++){
lis[i].onclick = function(){ alert(this.innerText);
}
}
8、文字与图片垂直居中对齐方法（考虑兼容性）
1.align="absmiddle"
2.vertical-align:middle；
9、请根据num倒序排序
var arr = [
{name:'A',num:4},
{name:'G',num:3},
{name:'V',num:5},
{name:'A',num:2},
{name:'X',num:9},
{name:'R',num:6},
{name:'N',num:undefined},
]
var newArr = arr.sort(function (a,b) {
return b.num-a.num;
});
console.log(newArr);
sort()函数主要运用了简单插入排序算法。
10、js中常用设计模式有哪些？
1、原始模式：
原理：声明对象，后续给对象加属性和方法
优点：可以直观的看出对象Car有属性 color,door,方法showcolor;
缺点：如果有多个类型，需要创建多个实例;
2、工厂模式：
原理：将原始方式封装到函数中，并返回这个对象
优点：同一类型同一属性可以重复调用;
缺点：同一类型不同属性值的不能调用;
3、构造函数方式：
原理：在构造函数内使用 this 关键字,创建属性和方法。再使用 new 运算符创建实例，通过传参生成不同的实例。
优点：该方式解决了以上模式所遇到的问题
缺点：构造函数会重复生成函数，为每个对象都创建独立的函数版本
4、混合的构造函数/原型方式
原理：利用构造函数方式创建函数的不同的部分，利用原型方式来定义相同的方法和属性
优点：此种 方式即符合语义又可以扩展新的属性和方法
11、有哪些页面性能优化的方法？
1、尽量减少 http 请求次数
2、减少 dns 查找次数
3、避免跳转
4、可缓存的ajax
5、预加载
12、如何实现以下函数？
sum(2, 5); // 7
sum(2)(5); // 7
①、 sum(2, 5); // 7
function sum (a,b) {
var sumz = 0;
sumz = a+b;
return sumz;
}
console.log(sum(2,5));
②、 function sum (a) {
function sum1 (b) {
return a+b;
}
return sum1;
}
console.log(sum(2)(5));
13、原生js实现jq中的$()选择器
function $ (str) {
return document.querySelector(str);
}
function $all (str) {
return document.querySelectorAll(str);//返回伪数组类型
}