前端知识点大乱炖（初级前端面试可看）

CSS部分：

---

1.CSS实现水平居中：
行内元素：text-align:center;
块级元素：div{width:100px;height:100px;margin:0 auto};

CSS实现垂直居中：
子元素为单行文本的状况：div{height:100px;line-height:100px};
块级元素：

div{
    height:100px;
    width:100px;
    position: relative;
    top: 50%;
    margin-top:-50px;  //设置为元素高度的一半，而且是负值
}

2.rem与em的区别：
rem是相对于根元素html的font-size而变化，而em是相对于父元素的font-size而变化

3.盒子模型：
<1>标准盒模型（W3C盒模型）：
box-sizing为content-box（默认值）
定义的宽度 width = content
元素显示的实际宽度 = width+padding+border

div{
    width: 100px;
    border: 10px;
}

那么这个div盒子显示的宽度为110px。

<2>怪异盒模型（IE盒模型）：
box-sizing为border-box
定义的宽度width = content+padding+border
元素显示的实际宽度就是width。

4.Link和@import导入css的区别：

<style>
    @import url(css文件路径);
</style>
<link href="css文件路径" rel="stylesheet" type="text/css" />

最主要的区别在于，link引入的css会和页面同步加载，而@import引入的css则会等到页面加载完毕以后开始加载，因此@import会致使页面闪烁；
其次，link出了能够导入css以外，还能够定义RSS、REL等。而@import只能用于加载CSS。
还有就是，link能够使用JS动态引入（JS建立DOM元素添加特性），而@import则不行；

5.多行元素的文本省略号：
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;

6.

---

JS部分：

---

1.冒泡排序：
只须要比较n-1趟，因此循环次数为数组长度-1。

function BubbleSort(arr){
    for(var i=0;i<arr.length-1;i++){
        for(var j=0;j<arr.length-1;j++){
            if(arr[j+1]<arr[j]){
                var temp;
                temp = arr[j+1];
                arr[j+1] = arr[j];
                arr[j] = arr[j+1];
            }
        }
    }
    return arr;
}

2.快速排序：
利用二分法和递归实现快速排序。

function quickSort(arr){
    if(arr.length == 0){
        return [];
    }
    //利用Math.floor()方法向下取整找到中间位置
    var cIndex = Math.floor(arr.length / 2);
    //再用splice()方法将数组中间位置的元素取出来
    var c = arr.splice(cIndex,1);
    var l = [],r = [];
    for(var i = 0;i<arr.length;i++){
        if(arr[i]<c){
            l.push(arr[i]);
        }else{
            r.push(arr[i]);
        }
    }
    return quickSort(l).concat(c,quickSort(r));
}

3.

---

网络协议部分：

---

1.Http状态码的含义：