# css基础
1.盒模型
IE盒模型： width： border+padding+contentWidth
标准盒模型： width: contentWidth
大小的设置，一般开发会设置：box-sizing: border-box;为IE盒模型
2.BFC
独立的渲染区域，不会受其他元素的影响。
解决垂直方向的margin重叠问题，解决因浮动而产生的高度塌陷等问题
触发BFC的方法：
display: inline-block/flex/grid
position: absolute/fixed/striky
float: left/right
overflow: hidden
3.float
值： left/right
浮动，脱离文档流，可以做类型报纸的布局
圣杯布局（各自有各自的元素）
双飞翼布局（全部包含在一个元素中）
都是才有float+ padding+ margin负值实现的
margin负值：
top:向上
left:向左
bottom:本身不动，下面一位向上
right:本身不动，右边那位想左
清除浮动常用的方法
.clearFix::after {
content: '';
display: block;
clear: both;
}
4.布局的方式
一行省略
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行省略
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-origin: vertical;
-webkit-line-clamp: 2;
5.flex
弹性布局
父元素的属性
flex-direction
flex-wrap
display: flex
justify-content
align-items
align-content
子元素
order
align-self
justify-self
flex-grown
flex-basic
flex-shrimk
6.定位
有一特殊的口诀，子绝父相
position:
relative,相对自身定位，不会脱离文档流，top/left/right/bottom
absolute,脱离文档流，相对已定位的父元素进行定位，子绝父相
fixed,相对于视口进行定位，脱离文档流
striky,粘性布局，相对于relative+fixed的结合
7.图文样式
vertical:baseline;对齐，图片与文字的对齐，下边无空隙
8.移动端响应式
rem,相对于根元素大小 html {font-size: 10px;}
em,相对于父元素的大小
100vh,视口的高度
100vw,视口的宽度
@media screen minwidth and maxWidth,媒体查询，适配不同设备
9.动画，渐变
transform, animation, @keyFrame transiton ,
linear-gradient/Radial Gradients，
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
10.居中对齐
子绝父相，left:50%,right: 50%,知道自身大小，margin负值搞定，未知大小，即tranform, translate搞定
flex: justify-content: center; align-items: center
grid: justify-content: center; align-items: center
text-align: center
margin: auto
11.继承问题
font, text, color, line开头一般可继承
line-height:继承有个小问题，就是1.5的时候是继承1.5,然后再计算通过font-size计算， 100%，的话，先计算，再继承
margin-top: 50%;父元素的50%宽度
%一般都是父元素的宽度
# HTTP协议
客户端与服务端的一种应用层通信协议
状态码：
100: 正在连接中
200: 连接成功
204: 成功，无返回内容
301: 永久定向
302: 临时重定向
304: Not Modified 未修改，资源未改变，可以使用之前的文件
400: 语义错误。
401: 没权限，Unauthorized 请求要求用户的身份认证
404: 资源未找到，URL错误
500: 服务端处理出现错误
method:
get:获取资源，简单参数，只能params传参,就是会在URL上拼接
push:新增参数
patch:修改资源
delete:删除参数
restful Api:
以前一般是用post请求完成所有，还有加上parmas传参实现，就像一个功能，现在是唯一标识，不同的应用的请求用不同的方法，在加上url实现对某个数据的处理
headers:
请求头
access
access-language
cookie
content-type
If-Modified-Since
IF-none-match
响应头
content-type
cache-control
expire
e-tag
set-cookie
access-control-allow-origin
缓存策略
强制缓存cache-control， expire，存在即使用缓存即可
协商缓存etag/if-none-match，last-modified / if-modified-sine, 若一样，即可以发送304，直接使用缓存即可
axios: 基于promise的http封装
ajax: 异步的javascript与 XML，实现的异步通信
fetch: 基于js实现的通信，只有网络原因请求失败才会失败
浏览器输入URL的过程
先去域名系统查找IP地址，发送请求到服务器，会3次握手，双方可接收，服务器返回资源，浏览器解析资源，html，先形成DOM树，接下来cssom树，结合形成render树，绘制，排列，合成，最后渲染到页面上来。
# JS基础知识
变量类型和计算
简单类型： string, boolean, number, null, undefined, symbol, BigInt
复杂类型： Object， array, function
string(方法): search, replace, slice, split, length, includes,chartAt, indexOf, substr, substring,repeat,toString, valueOf
boolean: toString, valueOf, construtor
&&，查找false
||, 查找true
！， 取反
truely, falsely变量
number： isNaN, isFinite, Number.isInterge, toFixed()
null: 空对象，但是typeof null === 'object'
undefined: 不存在，已声明但是未赋值，即为undefined
Symbol: 独一无二的值
常用来给独一无二的key值， Symbol.for('a')
Symbol给对象的键值的话，无法通过for in ， for of 去获取，因为是公有属性
Object, 基本所有的对象的原型链底端都是null
键一般是字符串
Object.is可以判断两个值是否相等NaN会一样， +0， —0不一样
Object.keys()
Object.value（）
for in 循环，会遍历原型， ES6建议使用for of
Map 键可以任何类型，weakMap,weakset,键，值只能是对象
Array： concat(), join, slice, splice, inclues, search, replace, length, substr, subtring, map,filter, reduce,,,,
foreach(抛出错误即可跳出循环), forOf
Date， day.js插件即可
Math: ceil, floor, max, min, random, round等
正则表达式
[]这个是范围 [a-z]
{10, 20}次数， 10-20次
*零次至多次， + 一次到多次， ？零次到1次
\s,空位符,\w === [0-9a-ZA-Z.]
^开始 $结尾 ｜或运算符
test() exec()方法
栈堆存储
简单类型是在栈中存储的
复杂类型是在堆中存储的，引发深拷贝与浅拷贝
类型判断
typeof, 判断类型，只能判断简单类型与object
null的时候也是object
construtor其原型未改变的时候可以判断
instanceof判断是否在原型链中的原型
Object.prototype.toString.apply()
逻辑运算 + - * / ()
&& || !
原型与原型链
class书写原型
constructor
extend super
对象的形成是通过new 一个构造函数即可形成的，每个构造函数都有原型，当属性在这个地方无法查找的时候，可以通过查找其原型上是否有该属性
intanceof就是查看原型链中是否存在该构造函数的原型
每个对象都有影式原型，__proto__, 其指向其构造函数中的原型prototype
当该属性在此无法查找的，就通过构造函数中的原型去查找，构造函数也是一个对象，也有隐式原型，__propto__ 指向其构造函数中的prototype，一直到Object.prototype,其隐式原型为__proto__ === null，结束了
作用域
全局作用域： window下，最外层
局部作用域： const let 变量无法提升 const声明的是常量
函数作用域，在函数内部，只能被函数内部去访问
闭包：函数内部可以产生闭包
闭包的使用场景私有变量
添加一个对象，第一个值，改值只能通过里面的函数去增删改
防抖（只执行最后一次），节流（每一段时间只执行一次）也可以使用
自由变量，改变量在改作用域中无法查找，只能往上层作用域中查找，直到找到为止，函数是在函数声明的地方一层一层向上查找
this 谁调用指向谁
直接调用用函数，一般执行window
对象点方法调用指向该对象
new 构造函数，this指向该对象
apply， call， bind, 改变this指向
异步
javascript是单线程的，为了用户体验更好，就出现了异步，就是不会阻塞代码的执行，在其他区域，等代触发时机，放置callback 队列中，等相对应的时间触发，假如是微任务的，就当调用栈中任务执行，就执行微任务队列，执行完dom进行更新，更新完后在触发event loop机制，执行宏任务队列中的任务。
回调函数：合适的时机执行的
宏任务：定时器，网络请求
微任务：Promise， async await
Promise： then， catch， finally, race, all, allsettle
3个状态， pedding, resolved, reject
then, catch中一般操作就是返回r
esolved， 除非报错或返回reject状态
async await 是使用同步的写法是写异步
try catch去捕捉失败的情况
ES6模块化， import export export default,是地址的引用， commonjs的模块，是相当与浅拷贝
Dom对象
DOM操作，以前需要经常操作DOM，自从出现React, Vue等操作，一般无需子啊操作DOM，框架帮助我们操作，有好处，操作dom是非常耗性能的，框架会帮忙以从而最小的操作DOM
DOM树，树形结构 document.getElementById, document.getElementByClassName, document.querySelector, document.querySelectorAll等
.style改变样式
dom.setAttribute样式
dom.removeAttribute样式
document.createElement()新增节点
dom.appendChild()插入其中
性能优化，先插入一个片段，最后再真正的插入，无需多次操作DOM，document.createDocumentFragment
Bom对象
浏览器对象模型
navigator.userAgent，获取设备信息
screen，获取screen.height, screen.width获取高度与宽度的信息等屏幕信息
location,获取URL相关信息，.hash,path,port,等等
history， history.go back forward
联想，路由的原理，hash模式，因为onhashchange监听hash的改变从而跳转，不会全部刷新页面，只会刷新需要刷新的部位
history模式， 需要后端支持，每次页面获取都跳转到固定的页面，利用pushState, onpopstate去监听页面页面的前进后退，从而刷新需要刷新的部分，而不是刷新全部。
事件
也是event-loop机制，
事件对象event
事件的三个阶段，捕获，目标， 冒泡
取消默认行为preventDefault，阻止冒泡stopPropagation
onClick, addEventListener，removeEventListener
事件代理就是利用事件冒泡是心的 event.target event.currentTarget
vue中的event与原生的event是一样的，react是再次封装形成的，react中的事件是绑定的body中的，是利用冒泡去触发在分发各自事件然后在触发的
ajax, 异步的javascript与xml,异步通信的一种
xmlHttpRequest
readyStatus === 4, state === 200
onreadyStatusChange open send
状态码：
100:正在连接中
200:连接成功
204:连接成功，我返回内容
301:永久重定向
302:临时重定向
304:资源未改变
400:解析错误
401:没权限
404:找不到，URL错误
跨域：
浏览器有同源策略，就是协议，域名，端口一致才能成功请求，但是图片css连接script无需遵循。
解决跨域问题：
JSONP利用script标签无需遵循的原理
设置access-control-allow-orign的响应头即可允许任何域名反问
或者通过服务器设置ngnix代理也可以实现代理
存储
cookie:大小2K左右，小，会随着请求发送到服务端，
localStorage: getItem, setItem, removeItem, clear, 4M,同域名下共享，永久有效，除非你删除,不会随着请求发送至服务端
sessionStorage: getItem, setItem, removeItem, clear,4M,当前窗口有效，关闭则没有，几个窗口同时打开也不同享，不会随着请求发送至服务端
