css

css盒模型

box-sizing: border-box; // IE模型

box-sizing: content-box; // 标准模型

BFC

边距重叠解决方案

基本概念：块级格式上下文

原理：就是渲染规则：

• 垂直方向边距会发生重叠
• BFC的区域不会与浮动元素的box重叠，这个也是用来清除浮动来布局的
• BFC是一个独立的容器，外面的元素不会影响里面的元素，自然里面的也不会影响外面的元素
• 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC

• 父元素增加overflow: hidden

• float值不为none；

• position的值不为static;

• display：table inline-block flex table-cell

使用场景, 解决问题

• 使用Float脱离文档流，高度塌陷
• Margin边距重叠

DOM事件类

DOM事件模型

捕获 冒泡

DOM事件流

DOM0 element.onclick = function() {}

DOM2 element.addEventListener("click", function() {}, false) // true 代表捕获阶段触发 false代表冒泡

DOM3 增加了很多时间 键盘 鼠标

描述DOM事件捕获的具体流程

window --> document --> html --> body --> ... --> 目标元素

html => document.element

Event 对象的常见应用

event.preventDefault() // 阻止默认时间 比如a标签默认跳转事件

event.stopPropagation() // 阻止冒泡事件

event.stopImmediatePropagation() // 多个事件中阻止其他事件

event.currentTarget // 当前所绑定的事件

event.target // 当前所绑定的元素

自定义事件

new Event('custome')

new CustomEvent("custome", 传参)

http 协议类

主要特点

简单快速

灵活

无连接

无状态

原型链类

创建对象有几种方法

• 字面量对象

var o1 = { name: 'o1' }
var o1 = new Object({ name: 'o1' })

• 使用显示构造函数穿件

  var M = function(name) {
  	this.name = name
  }
  var o2 = new M('02');

• Object.create

  var P = { name: o3 };
  var o3 = Object.create(P);

原型、构造函数、实例、原型链

原型链：从一个实例对象向上找构造这个实例的相关联的对象，从这个关联的对象又网上找原型对象，以此类推，一直到Object.prototype原型对象终止。即Object.prototype为原型链的顶端

通信类

跨域通信的几种方式

• JSONP

  异步script标签加载

• Hash

  

• postMessage

• WebSocket

• CORS

  fetch

安全类

CSRF

• 基本概念和缩写 CSRF，通常称为跨站请求伪造，英文名 Cross-site request forgery 缩写 CSRF

• CSRF 攻击原理

  

• CSRF 防御措施 Token 验证

  ​ 避免使用session cookie方式

  Referer 验证

  ​ 对页面来源验证，非自己站点页面进行拦截

  隐藏令牌

  ​ 在头部添加，不添加在url地址中

XSS

• 基本概念和缩写 XSS (cross-site scripting跨域脚本攻击）