一、盒子模型

CSS盒子模型由外到內(nèi)由：margin（外邊距）、border（邊框）、padding（內(nèi)邊距）、content（元素內(nèi)容）組成。

而盒子模型分為兩種：1.標準盒模型 2.IE盒模型

它們的區(qū)別在于對contentarea（內(nèi)容區(qū)域）的解析不同，說白了，就是對width、height解析不一樣（盒子都是一樣的，包括margin、border、padding、content）

1.標準盒模型（當設置box-sizing:content-box時）

width、height只包括content（元素內(nèi)容）

2.IE盒模型（當設置box-sizing:border-box時）

width、height則包括了border（邊框）、padding（內(nèi)邊距）、content（元素內(nèi)容）
width = content + padding×2 + border×2
height = content+ padding×2 + border×2

二、AJAX

之前的簡書已總結(jié)，請參照ajax--總結(jié)

三、居中（垂直水平對齊）

5種方法：<1>flex <2>定位的三種方法 <3>table-cell

<1>flex彈性布局

  display:flex;/*彈性布局*/
  flex-direction:row;/*橫向排列*/
  justify-content:space-around;/*均勻分布*/
  flex-wrap:wrap;/*父類寬度不夠自動換行*/

justify-content//橫軸方向上的對齊方式。
align-items //縱軸方向上的對齊方式。

缺點：有兼容性問題

<2>定位：3種方式（都有兼容性問題）

1.left.top為50%、margin-left和margin-top為自身寬高的-50%

        .main{
            position:relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }
        .one {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background: red;
        }

2.left、right、top、bottom全設為0，margin：auto。

        .main {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }

        .one {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background: red;
        }

3.left.top為50%、transform方法

        .main {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px orange solid;
        }

        .one {
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background: red;
        }

<3>table-cell 不用寬高，無兼容性問題（但是因為太老了，用的很少，知道就可以）

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;    
            text-align: center; 
            vertical-align: middle;
        }
        span {

        }

四、浮動

1.浮動的初衷:文字環(huán)繞圖片（+所以沒考慮有關布局的問題，所以會產(chǎn)生很多問題）

特性：1.破壞性 2.半脫離文檔流 3.緊密排列 4.轉(zhuǎn)化為塊元素

破壞性問題→父級塌陷→父級高度變?yōu)?→兩種解決方法：<1>清除浮動 <2>BFC

<1>清除浮動(after偽元素)

:after和::after寫法是等效的，都可以用來表示偽類對象，前者CSS2，后者CSS3，前者兼容性比后者強，但是開發(fā)H5建議使用后者。

.father::after{
     content:'.'
     display:block
     clear:both
}

即在父級元素的最后，添加了一個:after偽元素，通過清除偽元素的浮動，達到撐起父元素高度的目的

進一步理解（深層次原理）：給浮動元素的上面或者下面添加足夠的空間

<2>BFC 塊狀格式化上下文(它是一個獨立的渲染區(qū)域，***里面的子元素不會影響到外面的元素)

overfloat:hidden

問：特性：計算父容器高度的時候，需要把浮動元素也計算進去

拓展:說道BFC，也可以用來解決父子元素間的拖拽問題

兩種解決方法：

1.BFC解決

2.設置padding-top或者border-top（就相當于給父類來了一個可以抓著不動的杠子，設置為1px就好，這樣父類就可以不受到子類元素的拖拽），但是?。?！相當關鍵，padding-top直接設置1px就可以了，而border-top必須設置1px solid #000 大概是這個樣式，也是就說我們的border-top不能只單單設置1px而不設置其他樣式，否則會無效?。?！

拓展:兄弟間元素是重疊問題

對于這個問題，我們可以設置兄弟間的margin，兩個margin一樣是，之間就是這個margin值，否者誰大，之間的margin值就跟誰一樣。

五、原型鏈

我們可以知道這與原型有關

三者關系：
1.每個構(gòu)造函數(shù)都有一個原型對象(prototype).
//即每一個構(gòu)造函數(shù)有一個prototype屬性，prototype指向另一個對象(Object)，
//這個對象(Object)的所有屬性和方法都會被構(gòu)造函數(shù)的實例繼承.
2.原型對象(prototype)都包含一個構(gòu)造函數(shù)指針(constructor).
//prototype就是通過constructor指向Object的.
3.實例都包含一個指向原型對象的內(nèi)部指針(_proto_).
//_proto_是查找函數(shù)或?qū)ο蟮脑玩湹姆绞?

提到原型鏈，我們要知道他和原型、構(gòu)造函數(shù)以及實例有關

如果現(xiàn)在讓一個構(gòu)造函數(shù)的原型等于另一個類型實例，這就可以讓兩個類之間實現(xiàn)一種繼承關系，然后把這種所有類型關系連接起來，層層遞進，這就形成了一條長長的原型鏈。

六、閉包

產(chǎn)生閉包的原因：函數(shù)在定義的作用域外進行的訪問時，會產(chǎn)生閉包

定義：通俗的來說：子函數(shù)可以用父函數(shù)的變量

更嚴謹?shù)膩碚f：函數(shù)對象可以通過作用域鏈相互關系起來，函數(shù)體內(nèi)部的變量可以保存在函數(shù)作用域內(nèi)

閉包的優(yōu)點

<1>函數(shù)嵌套函數(shù)有利于封裝且變量命名不沖突

<2>函數(shù)內(nèi)部可以引用外部的變量和函數(shù)

閉包的缺點

參數(shù)和變量不會被垃圾回收機制回收

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

這樣會導致內(nèi)存泄露

我們可以通過手動清空引用 具體操作我們可以手動讓引用=null

七、this指針

• 有對象就指向調(diào)用對象
• 沒調(diào)用對象就指向全局對象
• 用new構(gòu)造就指向新對象
• 通過 apply 或 call 或 bind 來改變 this 的所指。

舉個栗子：

• 全局this指向window
• setTimeout指向window
• IE事件監(jiān)聽指向window

改變this的方法：

• apply（一個參數(shù)）偽數(shù)組，只有l(wèi)ength
• call（多個參數(shù)）
• bind（不是立即調(diào)用，先給另一個變量，需要調(diào)用的時候再使用）

八、返回狀態(tài)碼

常見狀態(tài)碼：
200：一切正常（請求成功）
201：已創(chuàng)建
202：已接受
301：資源（網(wǎng)頁等）被永久轉(zhuǎn)移到其他URL
403：無權(quán)限
404：請求的資源（網(wǎng)頁等）不存在
500：內(nèi)部服務器錯誤
503：服務不可用
505：HTTP版本不受支持

• 1xx：指示信息-表示請求已接受，繼續(xù)處理。
• 2xx：成功-表示請求已被成功接收、理解、接收。
• 3xx：重定向-要完成請求必須進行更近一步的操作。
• 4xx：客戶端錯誤-請求有語法錯誤或請求無法實現(xiàn)。
• 5xx：服務器端錯誤-服務器未能實現(xiàn)合法的請求。

九、從輸入一個URL到頁面加載的過程（7步）

打開瀏覽器，輸入一個網(wǎng)址后，到頁面加載完成時，這中間究竟發(fā)生了些什么~

以下是我的理解：

1.首先在瀏覽器中輸入url進行訪問。

2.然后瀏覽器會先在緩存里查找當前url是否有對應的IP，并比較緩存是否過期

3.緩存能用直接用緩存，不能的話去資源池找IP

4.三次握手建立連接（a：你好，b：你好，ab連接）

image

5.建立連接后，客戶端開始向服務器發(fā)送請求（包括起始行、請求頭和請求主體）

6.服務器接受到請求后，開始處理請求，然后發(fā)送給客戶端他請求的包

7.然后瀏覽器開始處理接收到的頁面文檔，首先將HTML解析成DOM樹，然后將CSS解析成樣式結(jié)構(gòu)體，最后二者結(jié)合成render tree（具體的解析過程：簡單來說就是CSS不會阻塞解析，但會阻塞渲染render tree，而JS則會阻塞瀏覽器解析HTML文檔）（可能還會涉及回流和重繪問題）

十、為什么有跨域和簡述集中跨域方式，見總結(jié)：有關jsonp和跨域

十一、未解決：判斷數(shù)據(jù)類型幾種方式？及bug和解決方法

js的數(shù)據(jù)類型 7種

引用數(shù)據(jù)類型:（也叫復雜數(shù)據(jù)類型）
1.object（function） alert(Function instanceof Object)//fn屬于obj
                     alert(Object instanceof Function)//obj屬于fn
基本數(shù)據(jù)類型：
2.String
3.number
4.undefined
5.null
6.boolean
7.symbol（Es6）

十二、有哪些選擇器

• 1. id選擇器 #name
• 2. 類選擇器 .name
• 3. 標簽選擇器 div
• 4. 子選擇器 div > ul
• 5. 包含選擇器 div ul
• 6. 通用選擇器 * （清除默認樣式）
• 7. 偽類選擇器 (允許給不存在的html標簽設置樣式) :hover :active :before :after
• 8. 分組選擇器 div, ul
• 9. css3 選擇器 (神器, 寫布局的時候講)
• 10.！ important

<style>
        .swiper-pagination-bullets{
            bottom: -9px !important;
        }
</style>

十三、優(yōu)先級問題

理解優(yōu)先級規(guī)則:

1. 選擇器的權(quán)值：標簽的權(quán)值為1，類選擇器的權(quán)值為10，ID選擇器的權(quán)值為100。
2. 對于同一元素的有多個相同權(quán)值樣式存在時，根據(jù)這些樣式的前后順序決定。

<1> 選擇器的優(yōu)先級（面試題）（引出important）

順序: !important > 行內(nèi)樣式 > ID選擇器(#id) >類選擇器( .class)=偽類=屬性 > 標簽(span)

<2>樣式表的優(yōu)先級（面試題）

    1. 行內(nèi)樣式    
    2. 內(nèi)聯(lián)樣式
    3. 外聯(lián)樣式

樣式表優(yōu)先級: 行內(nèi)樣式（標簽內(nèi)部）> 嵌入樣式表（當前文件中）> 外部樣式表

(簡述下css代碼的優(yōu)先級)

十四、CSS可以繼承哪些屬性

參考：https://www.cnblogs.com/thislbq/p/5882105.html
繼承: 所有和字體相關的樣式都能繼承
text-align
line-height 文字居中
color
font-size
font-weight
font-style
font-family 字體
text-decoration 下劃線
text-indent 縮進

a不能繼承顏色
i, em 不能繼承斜體
b, strong, h1-h6 不能繼承加粗

十五、說說垃圾回收機制，還有內(nèi)存泄漏什時候會出現(xiàn)以及解決方法

JS的垃圾回收機制有兩種:<1>標記清除<2>引用計數(shù)

<1>標記清除（也是目前主流的垃圾收集算法）：它的思想是給當前不適用的值加上標記，然后再回收他們的內(nèi)存。

<2>引用計數(shù)（JS引擎目前都不再使用這種算法）：這種方法的思想就是根據(jù)跟蹤記錄所有值被引用的次數(shù)，引用為0時，即收回內(nèi)存

內(nèi)存泄露在什么時候出現(xiàn)：內(nèi)存泄漏是在IE瀏覽器下，使用閉包操作DOM元素的時候產(chǎn)生的，具體來說，如果閉包的作用域中保存著一個HTML元素，它會創(chuàng)建一個循環(huán)引用，導致該元素的引用數(shù)至少也是1，永遠無法被銷毀。

內(nèi)存泄露可以通過手動消除引用的方式來解決，手動將引用設置為null

十六、用定時器寫時鐘 解決誤差的問題

解決誤差的方法：可以用當前時間 - 開始時間，來取得中間的時間差，然后根據(jù)時間差來動態(tài)計算指針劃過的刻度，這樣就可以減少因為執(zhí)行過程所帶來的誤差值。

for(var i = 0; i < 10000000000000; i++){i++} setTimeout(function(){alert(1)}, 30);

十七、獲取屏幕及div寬高

獲取視窗寬度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);

獲取div寬高 div的Id為“aaa”

<script type="text/javascript">
        let a = document.getElementById('aaa');
        console.log(`aaa的寬度是：${a.clientWidth}px`);

        a.addEventListener('click',function(){
            a.style.width = "300px"
            console.log(`現(xiàn)在的寬度是：${a.clientWidth}px`);
        })
</script>

十八：after偽元素畫橫線

1&2

            border-bottom: 1px solid #eeeeee;

            .selectSolo {
                padding: 20rpx 46rpx;
                position: relative;
            }

            .selectSolo::after {
                content: "";
                width: 100%;
                height: 2rpx;
                background: rgb(233, 178, 178);
                bottom: 0;
                left: 0;
                position: absolute;
            }

偽類（:）：為文檔樹中已有的元素添加樣式。

偽元素（::）：創(chuàng)建了一個文檔樹以外的元素，并且為他添加樣式。

十九：引入圖片

靜態(tài)圖片可以直接寫路徑。
但是如果需要動態(tài)圖片，比如三步運算符根據(jù)不同的狀態(tài)顯示不同的圖片，就需要提前import引入圖片。

二十：數(shù)組和對象

[]：數(shù)組，循環(huán)時用數(shù)組
{}：對象，對象里全是鍵值對，key:value，value可以是數(shù)組

  data() {
    return {
      list:[
        {img:xianeshezhi,text:'文本1'},
        {img:xiugaimima,text:'文本2'},
        {img:shoujihaobiangeng,text:'文本3'},
        {img:shoujihaozhaohui,text:'文本4'},
        {img:wangjimima,text:'文本5'},
        {img:shenfenxinxi,text:'文本6'},
      ],
    };
  },

二十一：滾動

overflow:auto : 當內(nèi)容超出限定值時添加滾動條（需有固定高度，且內(nèi)容超過此高度）

二十二、關于store存儲

vuex是一個專為vue.js應用程序開發(fā)的 “狀態(tài)管理模式”。
每一個vuex應用的核心就是store（倉庫），倉庫包含以下4點。

1.state：驅(qū)動應用的數(shù)據(jù)源。

由于vuex的狀態(tài)存儲是響應式的，從store實例中讀取狀態(tài)最簡單的方法就是在 計算屬性 中返回某個狀態(tài)。

在根實例中（new Vue）注冊store選項，該store實例會注入到根組件下的所有子組件中，且子組件能通過this.$store訪問到。

2.Mutations：類似于事件，更改Vuex的store中狀態(tài)的方法是提交Mutations。（ this.$store.commit() ）

mutation必須是同步函數(shù)，實質(zhì)上任何在回調(diào)函數(shù)中進行的狀態(tài)的改變都是不可追蹤的。

3.actions：類似于mutations，( this.$store.dispatch() )
不同在于，actions提交的是mutations，而不是直接變更狀態(tài)。actions可以包含任意異步操作。

4.getter：可以認為是store的計算屬性
Vuex允許我們在store中定義“getter”，getter接受state作為第一個參數(shù)。

二十三、省略

text-overflow: -o-ellipsis-lastline;
overflow: hidden;       //溢出內(nèi)容隱藏
text-overflow: ellipsis;    //文本溢出部分用省略號表示
display: -webkit-box;     //特別顯示模式
-webkit-line-clamp: 2;      //行數(shù)
line-clamp: 2;          
-webkit-box-orient: vertical; //盒子中內(nèi)容豎直排列