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

left


center


right

.content{
background-color: #CCC;
/* position: absolute; /
}
.left{
background-color: #999;
width: 150px;
height: 150px;
left: 0; /這個(gè)是最重要的，這個(gè)是相對(duì)于父元素的定位，導(dǎo)致不換行/ 絕對(duì)往左
/ 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; /這個(gè)是不可或缺的，這個(gè)是相對(duì)于父元素的定位，導(dǎo)致不換行/ 絕對(duì)往右
position: absolute;
}

2.Js 實(shí)現(xiàn)繼承的幾種方式
1.原型繼承，2.構(gòu)造器繼承，3實(shí)例繼承。
等。https://www.cnblogs.com/humin/p/4556820.html這個(gè)里面解釋的很詳細(xì)。

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

d：XSS的本質(zhì)是“HTML注入”，用戶的數(shù)據(jù)被當(dāng)成了HTML代碼一部分來(lái)執(zhí)行，從而混淆了原本的語(yǔ)義，產(chǎn)生了新的語(yǔ)義。2.2CSRF 跨站請(qǐng)求偽造

CSRF攻擊跨站請(qǐng)求偽造。 本質(zhì)：重要操作的所有參數(shù)都是可以被攻擊者猜測(cè)到的。攻擊者預(yù)測(cè)出URL的所有參數(shù)與參數(shù)值，才能成功地構(gòu)造一個(gè)偽造的請(qǐng)求。
3、防御CSRF攻擊
防御方法： 驗(yàn)證碼、 Referer Check 檢查請(qǐng)求是否來(lái)自合法的源（可被偽造）。
通用方法：Token 使用Anti-CSRF Token 在URL中保持原參數(shù)不變，新增一個(gè)參數(shù)Token。Token的值是隨機(jī)的（必須使用足夠安全的隨機(jī)數(shù)生成算法，或者采用真隨機(jī)數(shù)生成器），其為用戶與服務(wù)器所共同持有，可以放在用戶的Session中，或者瀏覽器的Cookie中。 注意保密，盡量把Token放在表單中（構(gòu)造一個(gè)隱藏的input元素），以POST提交，避免Token泄露。

注意：如果網(wǎng)站有XSS漏洞或者一些跨域漏洞，可能導(dǎo)致Token泄露。 在XSS攻擊下，讀取Token值，然后再構(gòu)造出一個(gè)合法的請(qǐng)求，可以稱為：XSRF。

3.HTTP 緩存機(jī)制及其原理
HTTP報(bào)文就是瀏覽器和服務(wù)器間通信時(shí)發(fā)送及響應(yīng)的數(shù)據(jù)塊。
https://www.cnblogs.com/chenqf/p/6386163.html
瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)，發(fā)送請(qǐng)求(request)報(bào)文；服務(wù)器向?yàn)g覽器返回?cái)?shù)據(jù)，返回響應(yīng)(response)報(bào)文。
報(bào)文信息主要分為兩部分
1.包含屬性的首部(header)--------------------------附加信息（cookie，緩存信息等）與緩存相關(guān)的規(guī)則信息，均包含在header中
2.包含數(shù)據(jù)的主體部分(body)-----------------------HTTP請(qǐng)求真正想要傳輸?shù)牟糠?br /> 緩存規(guī)則解析
為方便大家理解，我們認(rèn)為瀏覽器存在一個(gè)緩存數(shù)據(jù)庫(kù),用于存儲(chǔ)緩存信息。
在客戶端第一次請(qǐng)求數(shù)據(jù)時(shí)，此時(shí)緩存數(shù)據(jù)庫(kù)中沒有對(duì)應(yīng)的緩存數(shù)據(jù)，需要請(qǐng)求服務(wù)器，服務(wù)器返回后，將數(shù)據(jù)存儲(chǔ)至緩存數(shù)據(jù)庫(kù)中。

HTTP緩存有多種規(guī)則，根據(jù)是否需要重新向服務(wù)器發(fā)起請(qǐng)求來(lái)分類，我將其分為兩大類(強(qiáng)制緩存，對(duì)比緩存)
我們可以看到兩類緩存規(guī)則的不同，強(qiáng)制緩存如果生效，不需要再和服務(wù)器發(fā)生交互，而對(duì)比緩存不管是否生效，都需要與服務(wù)端發(fā)生交互。
兩類緩存規(guī)則可以同時(shí)存在，強(qiáng)制緩存優(yōu)先級(jí)高于對(duì)比緩存，也就是說(shuō)，當(dāng)執(zhí)行強(qiáng)制緩存的規(guī)則時(shí)，如果緩存生效，直接使用緩存，不再執(zhí)行對(duì)比緩存規(guī)則。
強(qiáng)制緩存：對(duì)于強(qiáng)制緩存來(lái)說(shuō)，響應(yīng)header中會(huì)有兩個(gè)字段來(lái)標(biāo)明失效規(guī)則（Expires/Cache-Control）
使用chrome的開發(fā)者工具，可以很明顯的看到對(duì)于強(qiáng)制緩存生效時(shí)，網(wǎng)絡(luò)請(qǐng)求的情況
Expires
　　Expires的值為服務(wù)端返回的到期時(shí)間，即下一次請(qǐng)求時(shí)，請(qǐng)求時(shí)間小于服務(wù)端返回的到期時(shí)間，直接使用緩存數(shù)據(jù)。不過Expires 是HTTP 1.0的東西，現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1，所以它的作用基本忽略。另一個(gè)問題是，到期時(shí)間是由服務(wù)端生成的，但是客戶端時(shí)間可能跟服務(wù)端時(shí)間有誤差，這就會(huì)導(dǎo)致緩存命中的誤差。所以HTTP 1.1 的版本，使用Cache-Control替代。
Cache-Control
Cache-Control 是最重要的規(guī)則。常見的取值有private、public、no-cache、max-age，no-store，默認(rèn)為private。
private: 客戶端可以緩存
public: 客戶端和代理服務(wù)器都可緩存（前端的同學(xué)，可以認(rèn)為public和private是一樣的）
max-age=xxx: 緩存的內(nèi)容將在 xxx 秒后失效
no-cache: 需要使用對(duì)比緩存來(lái)驗(yàn)證緩存數(shù)據(jù)（后面介紹）
no-store: 所有內(nèi)容都不會(huì)緩存，強(qiáng)制緩存，對(duì)比緩存都不會(huì)觸發(fā)（對(duì)于前端開發(fā)來(lái)說(shuō)，緩存越多越好，so…基本上和它說(shuō)886）
舉個(gè)板栗

圖中Cache-Control僅指定了max-age，所以默認(rèn)為private，緩存時(shí)間為31536000秒（365天）也就是說(shuō)，在365天內(nèi)再次請(qǐng)求這條數(shù)據(jù)，都會(huì)直接獲取緩存數(shù)據(jù)庫(kù)中的數(shù)據(jù)，直接使用。
對(duì)比緩存：對(duì)比緩存，顧名思義，需要進(jìn)行比較判斷是否可以使用緩存。
瀏覽器第一次請(qǐng)求數(shù)據(jù)時(shí)，服務(wù)器會(huì)將緩存標(biāo)識(shí)與數(shù)據(jù)一起返回給客戶端，客戶端將二者備份至緩存數(shù)據(jù)庫(kù)中。再次請(qǐng)求數(shù)據(jù)時(shí)，客戶端將備份的緩存標(biāo)識(shí)發(fā)送給服務(wù)器，服務(wù)器根據(jù)緩存標(biāo)識(shí)進(jìn)行判斷，判斷成功后，返回304狀態(tài)碼，通知客戶端比較成功，可以使用緩存數(shù)據(jù)。對(duì)于對(duì)比緩存來(lái)說(shuō)，緩存標(biāo)識(shí)的傳遞是我們著重需要理解的，它在請(qǐng)求header和響應(yīng)header間進(jìn)行傳遞，一共分為兩種標(biāo)識(shí)傳遞，接下來(lái)，我們分開介紹。
Last-Modified / If-Modified-Since
Last-Modified：
服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間。

If-Modified-Since：
再次請(qǐng)求服務(wù)器時(shí)，通過此字段通知服務(wù)器上次請(qǐng)求時(shí)，服務(wù)器返回的資源最后修改時(shí)間。服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若資源的最后修改時(shí)間大于If-Modified-Since，說(shuō)明資源又被改動(dòng)過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；若資源的最后修改時(shí)間小于或等于If-Modified-Since，說(shuō)明資源無(wú)新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。

Etag / If-None-Match（優(yōu)先級(jí)高于Last-Modified / If-Modified-Since）
Etag：服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器決定）。

If-None-Match：
再次請(qǐng)求服務(wù)器時(shí)，通過此字段通知服務(wù)器客戶段緩存數(shù)據(jù)的唯一標(biāo)識(shí)。服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的唯一標(biāo)識(shí)進(jìn)行比對(duì)，不同，說(shuō)明資源又被改動(dòng)過，則響應(yīng)整片資源內(nèi)容，返回狀態(tài)碼200；相同，說(shuō)明資源無(wú)新修改，則響應(yīng)HTTP 304，告知瀏覽器繼續(xù)使用所保存的cache。

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

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

header頭中，Set-cookie:http-only 是干什么用的
將cookie設(shè)置成HttpOnly是為了防止XSS攻擊,竊取cookie內(nèi)容,這樣就增加了cookie的安全… httponly : 表示cookie不能被客戶端腳本獲取到。

6.JavaScript的垃圾回收機(jī)制
標(biāo)記清除和引用計(jì)數(shù)，其中標(biāo)記清除是用的最多和支持最多的。js中最常用的垃圾回收方式就是標(biāo)記清除。當(dāng)變量進(jìn)入環(huán)境時(shí)，例如，在函數(shù)中聲明一個(gè)變量，就將這個(gè)變量標(biāo)記為“進(jìn)入環(huán)境”。從邏輯上講，永遠(yuǎn)不能釋放進(jìn)入環(huán)境的變量所占用的內(nèi)存，因?yàn)橹灰獔?zhí)行流進(jìn)入相應(yīng)的環(huán)境，就可能會(huì)用到它們。而當(dāng)變量離開環(huán)境時(shí)，則將其標(biāo)記為“離開環(huán)境”。
1
2
3
4
5 function test(){
var a = 10 ; //被標(biāo)記 ，進(jìn)入環(huán)境
var b = 20 ; //被標(biāo)記 ，進(jìn)入環(huán)境
}
test(); //執(zhí)行完畢 之后 a、b又被標(biāo)離開環(huán)境，被回收。
　　垃圾回收器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記（當(dāng)然，可以使用任何標(biāo)記方式）。然后，它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)（閉包）。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無(wú)法訪問到這些變量了。最后，垃圾回收器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收它們所占用的內(nèi)存空間。到目前為止，IE、Firefox、Opera、Chrome、Safari的js實(shí)現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時(shí)間間隔互不相同。

CSS BFC原理
BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，
原理或者作用：可以把BFC理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。
如何使用？體現(xiàn)？總結(jié)一下就是一下情況就是使用了BFC：
? float屬性不為none
? overflow不為visible(可以是hidden、scroll、auto)
? position為absolute或fixed
? display為inline-block、table-cell、table-caption
BFC的作用

清除內(nèi)部浮動(dòng)
我們?cè)诓季謺r(shí)經(jīng)常會(huì)遇到這個(gè)問題：對(duì)子元素設(shè)置浮動(dòng)后，父元素會(huì)發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個(gè)問題，只需要把把父元素變成一個(gè)BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。

垂直margin合并
在CSS當(dāng)中，相鄰的兩個(gè)盒子的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊的結(jié)果：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和。
這個(gè)同樣可以利用BFC解決。關(guān)于原理在前文已經(jīng)講過了。

創(chuàng)建自適應(yīng)兩欄布局
在很多網(wǎng)站中，我們常看到這樣的一種結(jié)構(gòu)，左圖片+右文字的兩欄結(jié)構(gòu)。
//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，屬性值有下面三個(gè)：
content-box：默認(rèn)值，讓元素維持W3C的標(biāo)準(zhǔn)盒模型。元素的寬度/高度（width/height）（所占空間）等于元素邊框?qū)挾?#xff08;border）加上元素內(nèi)邊距（padding）加上元素內(nèi)容寬度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。
border-box：讓元素維持IE6及以下版本盒模型，元素的寬度/高度（所占空間）等于元素內(nèi)容的寬度/高度。這里的content width/height包含了元素的border,padding,內(nèi)容的width/height。即：Element Width/Height =width /height-border-padding。

因?yàn)閎ox-sizing默認(rèn)是content-box，內(nèi)容區(qū)大小不會(huì)變，加上padding、margin、border的話，就會(huì)往外撐開，從而破壞布局結(jié)構(gòu)這時(shí)，使用border-box就可以完美解決了。
.content{
box-sizing: border-box;
padding: 22px;
border: 12px solid blue;
float: left;
width: 350px;
height: 100px;
background-color: #999999;
}
這樣，元素所占空間不會(huì)變，加了padding、border的話，會(huì)往內(nèi)擠，保持外面容器不被破壞（注意，margin不包含在元素空間，加了margin會(huì)向外撐開）效果圖：

JavaScript對(duì)象的淺拷貝和深拷貝
https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html
9.1基礎(chǔ)。JS 中有一些基本類型像是Number、String、Boolean，而對(duì)象就是像這樣的東西{ name: ‘Larry’, skill: ‘Node.js’ }，
基本類型是按值傳遞，像是這樣：在修改a時(shí)并不會(huì)改到b
var a = 25;
var b = a;
b = 18;
console.log(a);//25
console.log(b);//18
但對(duì)象就不同，對(duì)象傳的是按引用傳值：
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 }
復(fù)制一份obj1叫做obj2，然后把obj2.b改成100，但卻不小心改到obj1.b，因?yàn)樗麄兏臼峭粋€(gè)對(duì)象，這就是所謂的淺拷貝。要避免這樣的錯(cuò)誤發(fā)生就要寫成這樣：
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 }
這樣就是深拷貝，不會(huì)改到原本的obj1。
淺拷貝只復(fù)制指向某個(gè)對(duì)象的指針，而不復(fù)制對(duì)象本身，新舊對(duì)象還是共享同一塊內(nèi)存。但深拷貝會(huì)另外創(chuàng)造一個(gè)一模一樣的對(duì)象，新對(duì)象跟原對(duì)象不共享內(nèi)存，修改新對(duì)象不會(huì)改到原對(duì)象。
如何做到深拷貝呢？Deep Clone
1、手動(dòng)地復(fù)制語(yǔ)句
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)的意思是先建立一個(gè)空對(duì)象{}，接著把obj1中所有的屬性復(fù)制過去，所以obj2會(huì)長(zhǎng)得跟obj1一樣，這時(shí)候再修改obj2.b也不會(huì)影響obj1。
3、轉(zhuǎn)成 JSON 再轉(zhuǎn)回來(lái)
用JSON.stringify把對(duì)象轉(zhuǎn)成字符串，再用JSON.parse把字符串轉(zhuǎn)成新的對(duì)象
5、使用Object.create()方法
直接使用var newObj = Object.create(oldObj)，可以達(dá)到深拷貝的效果。
function deepClone(initalObj, finalObj) {
var obj = finalObj || {};
for (var i in initalObj) {
var prop = initalObj[i]; // 避免相互引用對(duì)象導(dǎo)致死循環(huán)，如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;
}

css 布局幾種方式—很重要

https://segmentfault.com/a/1190000011358507
定位，盒子模型，浮動(dòng)
1.最初的布局，table 布局
2.兩列布局，一邊固定，一邊自適應(yīng)
3.三列布局，兩邊固定，中間自適應(yīng)，有4種實(shí)現(xiàn)方法

float 實(shí)現(xiàn)，但是HTML 結(jié)構(gòu)不合理

適應(yīng)position 實(shí)現(xiàn)，以及l(fā)eft：0,right:0實(shí)現(xiàn)，

使用float和BFC配合圣杯布局

適應(yīng)display:flex 實(shí)現(xiàn)，完全合理，中間寬度100%
移動(dòng)端布局：
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 適配

https://blog.csdn.net/gj1949/article/details/53379324
1.固定布局
2.流式布局 40% ，60%
3.彈性布局 flex 實(shí)現(xiàn)
4.浮動(dòng)布局
5.定位布局

2.Js 實(shí)現(xiàn)繼承的幾種方式

2.Js 實(shí)現(xiàn)繼承的幾種方式

總結(jié)

以上是生活随笔為你收集整理的国庆假 的CSS +JS 学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。