国庆假 的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。需要对“\”对特殊字符转义，输出的变量的必须在引号内部。

       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 适配
    6. https://blog.csdn.net/gj1949/article/details/53379324
       1.固定布局
       2.流式布局 40% ，60%
       3.弹性布局 flex 实现
       4.浮动布局
       5.定位布局

2.Js 实现继承的几种方式

2.Js 实现继承的几种方式