javascript
国庆假 的CSS +JS 学习笔记
1.左右兩列定寬，中間自適應，
6. 一個div 中，放三個div ，其中左邊和右邊是150px，中間div 自適應寬度。
left
center
right
.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; /這個是不可或缺的，這個是相對于父元素的定位，導致不換行/ 絕對往右
position: absolute;
}
2.Js 實現繼承的幾種方式
1.原型繼承，2.構造器繼承，3實例繼承。
等。https://www.cnblogs.com/humin/p/4556820.html這個里面解釋的很詳細。
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。需要對“\”對特殊字符轉義，輸出的變量的必須在引號內部。
CSRF攻擊跨站請求偽造。 本質：重要操作的所有參數都是可以被攻擊者猜測到的。攻擊者預測出URL的所有參數與參數值，才能成功地構造一個偽造的請求。
3、防御CSRF攻擊
防御方法： 驗證碼、 Referer Check 檢查請求是否來自合法的源（可被偽造）。
通用方法：Token 使用Anti-CSRF Token 在URL中保持原參數不變，新增一個參數Token。Token的值是隨機的（必須使用足夠安全的隨機數生成算法，或者采用真隨機數生成器），其為用戶與服務器所共同持有，可以放在用戶的Session中，或者瀏覽器的Cookie中。 注意保密，盡量把Token放在表單中（構造一個隱藏的input元素），以POST提交，避免Token泄露。
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);
將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實現使用的都是標記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時間間隔互不相同。
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的作用
我們在布局時經常會遇到這個問題：對子元素設置浮動后，父元素會發生高度塌陷，也就是父元素的高度變為0。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設置overflow:hidden。
在CSS當中，相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊的結果：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
這個同樣可以利用BFC解決。關于原理在前文已經講過了。
在很多網站中，我們常看到這樣的一種結構，左圖片+右文字的兩欄結構。
//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會向外撐開）效果圖：
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;
}
css 布局幾種方式—很重要
定位，盒子模型，浮動
1.最初的布局，table 布局
2.兩列布局，一邊固定，一邊自適應
3.三列布局，兩邊固定，中間自適應，有4種實現方法
移動端布局：
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 適配
1.固定布局
2.流式布局 40% ，60%
3.彈性布局 flex 實現
4.浮動布局
5.定位布局
2.Js 實現繼承的幾種方式
2.Js 實現繼承的幾種方式
總結
以上是生活随笔為你收集整理的国庆假 的CSS +JS 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 摩托车为什么缸头渗油？
- 下一篇： gradle idea java ssm