1.左右兩列定寬，中間自適應，
6. 一個div 中，放三個div ，其中左邊和右邊是150px，中間div 自適應寬度。

.content{
background-color: #CCC;
/* position: absolute; /
}
.left{
background-color: #999;
width: 150px;
height: 150px;
left: 0; /這個是最重要的，這個是相對於父元素的定位，導致不換行/ 絕對往左
/ float: left; */
position: absolute;
}
.center{
float: left;
background-color: #000000;
margin-right: 150px;
height: 150px;
width:100%;
}
.right{
background-color: rgb(14, 189, 29);
width: 150px;
height: 150px;
float: left;
right: 0; /這個是不可或缺的，這個是相對於父元素的定位，導致不換行

2.Js 前端攻擊XSS 和CSRF,及其避免方法
2.1XSS 跨站指令碼
特點：能注入惡意的HTML/JavaScript程式碼到使用者瀏覽的網頁上，從而達到Cookie資料竊取、會話劫持、釣魚欺騙等攻擊。<攻擊程式碼不一定（非要）在 中>
原因：a：Web瀏覽器本身的設計不安全。瀏覽器能解析和執行JS等程式碼，但是不會判斷該資料和程式程式碼是否惡意。
b：輸入和輸出是Web應用程式最基本的互動，而且網站的互動功能越來越豐富。如果在這過程中沒有做好安全防護，很容易會出現XSS漏洞。
c：程式設計師水平參差不齊，而且大都沒有過正規的安全培訓，沒有相關的安全意識。
d：XSS攻擊手段靈活多變。
3、防禦XSS攻擊
a：HttpOnly 瀏覽器禁止頁面的JS訪問帶有HttpOnly屬性的Cookie。
b：輸入檢查 XSS Filter 對輸入內容做格式檢查，類似“白名單”，可以讓一些基於特殊字元的攻擊失效。在客戶端JS和伺服器端程式碼中實現相同的輸入檢查（伺服器端必須有）。
c：輸出檢查 在變數輸出到html頁面時，可以使用編碼或轉義的方式來防禦XSS攻擊 HtmlEncode：將字元轉成HTMLEntities，對應的標準是ISO-8859-1。
& --> & < --> < > -->> " --> " ’ --> ’ / --> /
JS中可以使用JavascriptEncode。需要對“\”對特殊字元轉義，輸出的變數的必須在引號內部。

       d：XSS的本質是“HTML注入”，使用者的資料被當成了HTML程式碼一部分來執行，從而混淆了原本的語義，產生了新的語義。

2.2CSRF 跨站請求偽造

CSRF攻擊跨站請求偽造。 本質：重要操作的所有引數都是可以被攻擊者猜測到的。攻擊者預測出URL的所有引數與引數值，才能成功地構造一個偽造的請求。
3、防禦CSRF攻擊
防禦方法： 驗證碼、 Referer Check 檢查請求是否來自合法的源（可被偽造）。
通用方法：Token 使用Anti-CSRF Token 在URL中保持原引數不變，新增一個引數Token。Token的值是隨機的（必須使用足夠安全的隨機數生成演算法，或者採用真隨機數生成器），其為使用者與伺服器所共同持有，可以放在使用者的Session中，或者瀏覽器的Cookie中。 注意保密，儘量把Token放在表單中（構造一個隱藏的input元素），以POST提交，避免Token洩露。

       注意：如果網站有XSS漏洞或者一些跨域漏洞，可能導致Token洩露。 
                  在XSS攻擊下，讀取Token值，然後再構造出一個合法的請求，可以稱為：XSRF。

3.HTTP 快取機制及其原理
HTTP報文就是瀏覽器和伺服器間通訊時傳送及響應的資料塊。
https://www.cnblogs.com/chenqf/p/6386163.html
瀏覽器向伺服器請求資料，傳送請求(request)報文；伺服器向瀏覽器返回資料，返回響應(response)報文。
報文資訊主要分為兩部分
1.包含屬性的首部(header)--------------------------附加資訊（cookie，快取資訊等）與快取相關的規則資訊，均包含在header中
2.包含資料的主體部分(body)-----------------------HTTP請求真正想要傳輸的部分
快取規則解析
為方便大家理解，我們認為瀏覽器存在一個快取資料庫,用於儲存快取資訊。
在客戶端第一次請求資料時，此時快取資料庫中沒有對應的快取資料，需要請求伺服器，伺服器返回後，將資料儲存至快取資料庫中。

HTTP快取有多種規則，根據是否需要重新向伺服器發起請求來分類，我將其分為兩大類(強制快取，對比快取)
我們可以看到兩類快取規則的不同，強制快取如果生效，不需要再和伺服器發生互動，而對比快取不管是否生效，都需要與服務端發生互動。
兩類快取規則可以同時存在，強制快取優先順序高於對比快取，也就是說，當執行強制快取的規則時，如果快取生效，直接使用快取，不再執行對比快取規則。
強制快取：對於強制快取來說，響應header中會有兩個欄位來標明失效規則（Expires/Cache-Control）
使用chrome的開發者工具，可以很明顯的看到對於強制快取生效時，網路請求的情況
Expires
　　Expires的值為服務端返回的到期時間，即下一次請求時，請求時間小於服務端返回的到期時間，直接使用快取資料。不過Expires 是HTTP 1.0的東西，現在預設瀏覽器均預設使用HTTP 1.1，所以它的作用基本忽略。另一個問題是，到期時間是由服務端生成的，但是客戶端時間可能跟服務端時間有誤差，這就會導致快取命中的誤差。所以HTTP 1.1 的版本，使用Cache-Control替代。
Cache-Control
Cache-Control 是最重要的規則。常見的取值有private、public、no-cache、max-age，no-store，預設為private。
private: 客戶端可以快取
public: 客戶端和代理伺服器都可快取（前端的同學，可以認為public和private是一樣的）
max-age=xxx: 快取的內容將在 xxx 秒後失效
no-cache: 需要使用對比快取來驗證快取資料（後面介紹）
no-store: 所有內容都不會快取，強制快取，對比快取都不會觸發（對於前端開發來說，快取越多越好，so…基本上和它說886）
舉個板栗

圖中Cache-Control僅指定了max-age，所以預設為private，快取時間為31536000秒（365天）也就是說，在365天內再次請求這條資料，都會直接獲取快取資料庫中的資料，直接使用。
對比快取：對比快取，顧名思義，需要進行比較判斷是否可以使用快取。
瀏覽器第一次請求資料時，伺服器會將快取標識與資料一起返回給客戶端，客戶端將二者備份至快取資料庫中。再次請求資料時，客戶端將備份的快取標識傳送給伺服器，伺服器根據快取標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可以使用快取資料。對於對比快取來說，快取標識的傳遞是我們著重需要理解的，它在請求header和響應header間進行傳遞，一共分為兩種標識傳遞，接下來，我們分開介紹。
Last-Modified / If-Modified-Since
Last-Modified：
伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。

If-Modified-Since：
再次請求伺服器時，通過此欄位通知伺服器上次請求時，伺服器返回的資源最後修改時間。伺服器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若資源的最後修改時間大於If-Modified-Since，說明資源又被改動過，則響應整片資源內容，返回狀態碼200；若資源的最後修改時間小於或等於If-Modified-Since，說明資源無新修改，則響應HTTP 304，告知瀏覽器繼續使用所儲存的cache。

Etag / If-None-Match（優先順序高於Last-Modified / If-Modified-Since）
Etag：伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則由伺服器決定）。

If-None-Match：
再次請求伺服器時，通過此欄位通知伺服器客戶段快取資料的唯一標識。伺服器收到請求後發現有頭If-None-Match 則與被請求資源的唯一標識進行比對，不同，說明資源又被改動過，則響應整片資源內容，返回狀態碼200；相同，說明資源無新修改，則響應HTTP 304，告知瀏覽器繼續使用所儲存的cache。

4.Js 增加時間監聽和取消時間監聽方式
div = document.getElementById(“test”);
div.addEventListener(“click”,function() {
console.log(1);
})
或者
div.attachEvent(“onclick”,function() {
console.log(1);
});

取消
document.getElementById(“b”).removeEventListener(“click”,show);

5. header頭中，Set-cookie:http-only 是幹什麼用的
   將cookie設定成HttpOnly是為了防止XSS攻擊,竊取cookie內容,這樣就增加了cookie的安全… httponly : 表示cookie不能被客戶端指令碼獲取到。

6.JavaScript的垃圾回收機制
標記清除和引用計數，其中標記清除是用的最多和支援最多的。js中最常用的垃圾回收方式就是標記清除。當變數進入環境時，例如，在函式中宣告一個變數，就將這個變數標記為“進入環境”。從邏輯上講，永遠不能釋放進入環境的變數所佔用的記憶體，因為只要執行流進入相應的環境，就可能會用到它們。而當變數離開環境時，則將其標記為“離開環境”。
1
2
3
4
5 function test(){
var a = 10 ; //被標記 ，進入環境
var b = 20 ; //被標記 ，進入環境
}
test(); //執行完畢 之後 a、b又被標離開環境，被回收。
　　垃圾回收器在執行的時候會給儲存在記憶體中的所有變數都加上標記（當然，可以使用任何標記方式）。然後，它會去掉環境中的變數以及被環境中的變數引用的變數的標（閉包）。而在此之後再被加上標記的變數將被視為準備刪除的變數，原因是環境中的變數已經無法訪問到這些變量了。最後，垃圾回收器完成記憶體清除工作，銷燬那些帶標記的值並回收它們所佔用的記憶體空間。到目前為止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。

7. CSS BFC原理
   BFC 是什麼之前，需要先介紹 Box、Formatting Context的概念。
   https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
   BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，
   原理或者作用：可以把BFC理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
   如何使用？體現？總結一下就是一下情況就是使用了BFC：
   • float屬性不為none
   • overflow不為visible(可以是hidden、scroll、auto)
   • position為absolute或fixed
   • display為inline-block、table-cell、table-caption
   BFC的作用
8. 清除內部浮動
   我們在佈局時經常會遇到這個問題：對子元素設定浮動後，父元素會發生高度塌陷，也就是父元素的高度變為0。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設定overflow:hidden。
9. 垂直margin合併
   在CSS當中，相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。
   摺疊的結果：
   兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。
   兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。
   兩個外邊距一正一負時，摺疊結果是兩者的相加的和。
   這個同樣可以利用BFC解決。關於原理在前文已經講過了。
10. 建立自適應兩欄佈局
    在很多網站中，我們常看到這樣的一種結構，左圖片+右文字的兩欄結構。
    //CSS
    *{
    margin: 0;
    padding: 0;
    }
    .box {
    width:300px;
    border: 1px solid #000;
    }
    .img {
    float: left;
    }
    .info {
    background: #f1f1f1;
    color: #222;
    }
    //HTML

資訊資訊資訊資訊資訊資訊

8.Box-sizing 屬性，就是兩種盒子模型
https://www.cnblogs.com/ooooevan/p/5470982.html
css3增添了盒模型box-sizing，屬性值有下面三個：
content-box：預設值，讓元素維持W3C的標準盒模型。元素的寬度/高度（width/height）（所佔空間）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。
border-box：讓元素維持IE6及以下版本盒模型，元素的寬度/高度（所佔空間）等於元素內容的寬度/高度。這裡的content width/height包含了元素的border,padding,內容的width/height。即：Element Width/Height =width /height-border-padding。

因為box-sizing預設是content-box，內容區大小不會變，加上padding、margin、border的話，就會往外撐開，從而破壞佈局結構這時，使用border-box就可以完美解決了。
.content{
box-sizing: border-box;
padding: 22px;
border: 12px solid blue;
float: left;
width: 350px;
height: 100px;
background-color: #999999;
}
這樣，元素所佔空間不會變，加了padding、border的話，會往內擠，保持外面容器不被破壞（注意，margin不包含在元素空間，加了margin會向外撐開）效果圖：

9. JavaScript物件的淺拷貝和深拷貝
   https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html
   9.1基礎。JS 中有一些基本型別像是Number、String、Boolean，而物件就是像這樣的東西{ name: ‘Larry’, skill: ‘Node.js’ }，
   基本型別是按值傳遞，像是這樣：在修改a時並不會改到b
   var a = 25;
   var b = a;
   b = 18;
   console.log(a);//25
   console.log(b);//18
   但物件就不同，物件傳的是按引用傳值：
   var obj1 = { a: 10, b: 20, c: 30 };
   var obj2 = obj1;
   obj2.b = 100;
   console.log(obj1);
   // { a: 10, b: 100, c: 30 } <-- b 被改到了
   console.log(obj2);
   // { a: 10, b: 100, c: 30 }
   複製一份obj1叫做obj2，然後把obj2.b改成100，但卻不小心改到obj1.b，因為他們根本是同一個物件，這就是所謂的淺拷貝。要避免這樣的錯誤發生就要寫成這樣：
   var obj1 = { a: 10, b: 20, c: 30 };
   var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
   obj2.b = 100;
   console.log(obj1);
   // { a: 10, b: 20, c: 30 } <-- b 沒被改到
   console.log(obj2);
   // { a: 10, b: 100, c: 30 }
   這樣就是深拷貝，不會改到原本的obj1。
   淺拷貝只複製指向某個物件的指標，而不復制物件本身，新舊物件還是共享同一塊記憶體。但深拷貝會另外創造一個一模一樣的物件，新物件跟原物件不共享記憶體，修改新物件不會改到原物件。
   如何做到深拷貝呢？Deep Clone
   1、手動地複製語句
   var obj1 = { a: 10, b: 20, c: 30 };
   var obj2 = { a: obj1.a, b: obj1.b, c: obj1.c };
   obj2.b = 100;
   console.log(obj1);
   // { a: 10, b: 20, c: 30 } <-- 沒被改到
   console.log(obj2);
   // { a: 10, b: 100, c: 30 }
   2、Object.assign()
   Object.assign({}, obj1)的意思是先建立一個空物件{}，接著把obj1中所有的屬性複製過去，所以obj2會長得跟obj1一樣，這時候再修改obj2.b也不會影響obj1。
   3、轉成 JSON 再轉回來
   用JSON.stringify把物件轉成字串，再用JSON.parse把字串轉成新的物件
   5、使用Object.create()方法
   直接使用var newObj = Object.create(oldObj)，可以達到深拷貝的效果。
   function deepClone(initalObj, finalObj) {
   var obj = finalObj || {};
   for (var i in initalObj) {
   var prop = initalObj[i]; // 避免相互引用物件導致死迴圈，如initalObj.a = initalObj的情況
   if(prop === obj) {
   continue;
   }
   if (typeof prop === ‘object’) {
   obj[i] = (prop.constructor === Array) ? [] : Object.create(prop);
   } else {
   obj[i] = prop;
   }
   }
   return obj;
   }

10. css 佈局幾種方式—很重要

    1. https://segmentfault.com/a/1190000011358507
       定位，盒子模型，浮動
       1.最初的佈局，table 佈局
       2.兩列布局，一邊固定，一邊自適應
       3.三列布局，兩邊固定，中間自適應，有4種實現方法
    2. float 實現，但是HTML 結構不合理
    3. 適應position 實現，以及left：0,right:0實現，
    4. 使用float和BFC配合聖盃佈局
    5. 適應display:flex 實現，完全合理，中間寬度100%
       移動端佈局：
       1.媒體查詢，
       @media screen and (min-width:750px){
       .media{
       height: 300px;
       background-color: red;
       }
       }
       @media screen and (max-width:750px){
       .media{
       height: 500px;
       background-color: black
       }
       }
       2.flex 佈局
       3.rem 適配

2.Js 實現繼承的幾種方式

2.Js 實現繼承的幾種方式