一面
# css
# css盒模型
box-sizing: border-box; // IE模型
box-sizing: content-box; // 标准模型
2
3
4
# 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' })
2
使用显示构造函数穿件
var M = function(name) { this.name = name } var o2 = new M('02');
1
2
3
4Object.create
var P = { name: o3 }; var o3 = Object.create(P);
1
2
# 原型、构造函数、实例、原型链
原型链:从一个实例对象向上找构造这个实例的相关联的对象,从这个关联的对象又网上找原型对象,以此类推,一直到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跨域脚本攻击)