前端知識點大亂燉（初級前端面試可看）

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狀態碼的含義：