页面布局
题目1：高度已知，请写出三栏布局，其中左栏和右栏宽度歌为300px 中间自适应
① 浮动 左边左浮动 右边有浮动
② 绝对定位 定位左边和定位右边 中间left:300 右边left:300
③ 中间的flex:1
④ display:table-ceil布局
⑤ 网格布局
总结：扩充：
1、各自优缺点
2、高度不确定 中间高了两边撑起来 ：flex和table-ceil布局能用
3、兼容性 实际中用哪个
清除浮动：
1.在浮动元素的最后添加一个空标签进行clear:both
2.给父元素触发BFC 比如overflow：hidden
3.给父元素添加一个伪元素
.clearfix:after{
content: '".",
height:0,
display: block;
visibility: hidden;
clear:both
}
.clearfix {
*zoom: 1;
} /* IE6、7 专有 */
https://www.jianshu.com/p/32b35d3f61a7
BFC
规则：
1、垂直方向的边距会重叠
2、BFC的区域不会和浮动元素的box重叠（清除浮动）(就是两栏布局的时候左侧浮动右侧高度高于左边 就会占据下面位置 这个时候给右边div一个BFC 即可)
3、BFC在页面上是独立的容器
4、BFC计算高度的时候浮动元素也会参与计算
触发条件
1、浮动
2、display:inline-block 等
3、定位： position:absolute等
4、overflow:hidden等
5、flex布局 grid布局
https://blog.csdn.net/riddle1981/article/details/52126522
CSS盒模型
设置：
box-sizing:content-box 标准（默认）
box-sizing:border-box IE
获取：
dom.style.width 只能获取内联样式
dom.currentStyle.width 获取解析之后的（IE）
window.getComputedStyle(dom),width 获取接解析之后的宽度 （webkit）
dom.getBoundingClientRect().width 返回四个值 （top,left,width,height）
DOM事件
事件级别：
DOM0 element.onclick=function(){}
DOM2 element.addEventListener("click",function(){},false) 监听最后的参数默认false 表示该事件实在冒泡阶段触发 true则是在捕获阶段触发
DOM3 element.addEventListener("keyup",function(){},false)
事件模型：
冒泡和捕获
事件流：
捕获->目标阶段->冒泡
事件捕获流程：
window->document->html->body->...->目标元素（document.documentElement获取html）
Event对象：
event.preventDefault() 阻止默认事件
event.stopPropagation() 阻止冒泡事件
event.stopImmediatePropagation() 一个事件绑定多个方法 可在第一个方法中阻止第二个方法的执行
event.currentTarget 事件委托绑定事件的父元素
event.target 事件委托的当前被点击的子元素
自定义事件：
var eve = new Event('custome'); CustomEvent在指定事件名称的时候还可指定Object作为参数
ele.addEventListener('custome', function(){
console.log("自定义事件的回调")
})
ele.dispatchEvent(eve);
HTTP协议
http协议的特点：
无连接：连接一次就会断开
无状态：两种身份 无法区分身份
简单快速：
灵活：
http报文组成部分：
请求报文： 请求行、 请求头、 空行、请求体
响应报文： 状态行、 响应头、 空行、 响应体
请求行：http方法，请求方法、页面地址、版本
请求头： key value值告诉服务端需要的内容
http方法：
get->获取资源
post->传输资源
put->更新资源
delete->删除资源
HEAD->获得报文首部
get和post的区别
1、get在浏览器回退时是无害的，而post不会再次提交请求(记住)
2、get产生的url地址可以被隐藏，而post不可以（浏览器收藏功能）
3、get请求会被浏览器主动缓存，而post不会，除非手动设置(记住 )
4、get请求只能进行url编码，post支持多种编码方式
5、get请求参数会被完整保留在浏览器历史记录中 而post参数不会被保留（记住）
6、get在url中的参数长度是有限制的（2kb），而post没有（记住）
7、参数的数据类型，get只接受ASCII码 而post没有限制
8、get比post更不安全 因为参数暴露在url上 不能用来传递敏感信息
9、get参数通过url传递、post放在请求体中（记住）
http状态码：
1：指示信息-表示请求已经接收，继续处理
2：成功，请求已经被成功接收
3：重定向： 要完成请求必须进行更进一步的操作
4：客户端错误：请求有语法错误或请求无法实现
5**：服务器错误：服务器未能实现合法的请求
详细：
206 客服端发送了一个带有range头的get请求，服务器完成了它
301：永久重定向
302：临时重定向
304：浏览器有缓存
400：请求有语法错误
401：请求未授权
403：访问被禁止（某个网页可能只能被服务器访问）
404： 请求资源不存在
500：服务器错误
503：临时过载，一会会恢复
持久连接：使用Keep-Alive模式时候，保持客户端和服务器端持续建立连接（http1.1才支持）
管线化：在持久化连接下，多个请求打包一次发送给服务端 服务端一起打包传回来（http1.1才支持，只有get和head才支持管线化，post有限制 现代浏览器如Chrome和Firefox默认未开启管线化，初次连接是不应该启动，应确保浏览器支持）
面向对象
原型链
创建对象的方法：
1、字面量、new Object()
2、自定义构造函数、实例化构造函数
3、obj = Object.create(obj1) 创建对象obj的原型指向obj1
（只要是对象， 就是实例 ，使用new 后面的函数就是构造函数）
所以原型对象上拥有proto属性而不是prototype属性
instanceof判断实例对象上的proto上的对象和构造函数上的引用对象是否一致 （只要在构造函数原型链上的对象都会返回true）
new关键字的过程：
1、创建一个空对，继承自构造函数的prototype
2、构造函数被执行、传入响应的参数 同时上下文会被指定为新实例
3、如果构造函数返回了一个“”对象“”如果构造函数没有返回对象 则返回的是步骤一创建的对象
new运算符的原理：（代码实现）
function new2(func){ //func为构造函数
var o = Object.create(func.prototype);
var k = func.call(o);
if(typeof k === 'object'){
return k;
}else{
return o;
}
}
function M(){ //M是构造函数
}
var obj = new2(M) // obj即为M的实例
面向对象：
类的声明：
两种方法 函数式的和ES6的声明（new的时候如果没有传参数 括号可以省略）
继承：
1、构造函数继承
//构造函数实现继承
function Parent() {
this.name = "parent"
}
Parent.prototype.say = function(){
console.log(this.name);
}
function Child(){
Parent.call(this);
this.type = 'child'
}
缺点：不能继承父类原型上的属性
2、实例继承：
function Parent2() {
this.name = "parent2"
}
Parent2.prototype.say = function(){
console.log(this.name);
}
function Child2(){
this.type = 'child2'
}
Child2.prototype = new Parent2();
缺点：子类的所有实例全部继承自同一个对象 如Parent2的name修改了 所有的子类的name都修改了
3、组合继承
function Parent3() {
this.name = "parent3"
}
Parent3.prototype.say = function(){
console.log(this.name);
}
function Child3(){
Parent3.call(this);
this.type = 'child2'
}
Child3.prototype = new Parent3();
缺点：1、这个父类构造函数里面的东西执行了2次 第一次是在call执行的 第二次是在继承的时候执行的
优化：Child3.prototype = Parent3.prototype;
优化后的缺点：c3 = new Child3(); c3.constructor === Parent3 （不符合预期，应该是指向Child3）
再次优化：
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;
通信
同源策略以及限制
限制：
cookie localstorge和indexDB 无法读取
DOM无法获得
ajax无法发送
前后端通信方式：
ajax、websoket、cors
创建ajax:
XMLHtmlRequest对象的工作流程、兼容性处理、事件的触发条件、 事件的触发顺序
前后端如何通信
原生实现ajax
跨域的几种方式
JSONP、 CORS、 Hash（url中#号后面的部分。hash改变页面不刷新）、postMessage、webSocket
原理：
JSONP...
hash:
// A 中
var B = document.getElementsByTagName('iframe');
B.src = B.src + '#' + 'data';
//B 中
window.onhashchange = function(){
var data = window.location.hash;
}
postMessage:
window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。
//窗口A给窗口B发消息
var targetWindow = window.opener; //targetWindow是B窗口的引用
targetWindow.postMessage('data', "http://B.com");
//B中监听
window.addEventListener('message', function(event){
console.log(event.origin); //http://A.com
console.log(event.source); //Awindow
console.log(event.data); //data
})
webSocket:
let ws = new WebSocket("ws://localhost:8181"); //ws协议 加密的是wxs
ws.onopen = function() {
console.log("client：打开连接");
ws.send("client：hello，服务端");
};
ws.onmessage = function(e) {
console.log("client：接收到服务端的消息 " + e.data);
setTimeout(() => {
ws.close();
}, 5000);
};
ws.onclose = function(params) {
console.log("client：关闭连接");
};
https://www.jianshu.com/p/3b5fbc1abc9d
cors: fetch
https://www.cnblogs.com/wyy1234/p/9510692.html
安全
算法
排序：快速、选择、希尔
堆栈、队列、链表
递归
波兰式和逆波兰式
