两个div一个靠左一个靠右

想着使用align-self来实现一左一右的布局,结果自己看了文档才发现完全错了
它是覆盖align-items属性的，而align-items是垂直方向上的对齐方式
所以align-self也是垂直方向上的对齐方式

方案一：使用float
一个float:left
一个float:right
父元素overflow:hidden即可
方案二：使用justify-content调整元素水平方向上的位置

两个元素的父元素

.parent {
    display:flex;
    justify-content:space-between;
}

display:none和visibility:hidden两者的区别

display:none 隐藏该节点及子节点隐藏后的元素无法点击无法使用屏幕阅读器等辅助设备访问占据的空间消失

visibility:hidden
元素隐藏不显示但仍会占页面位置
可点击，触发元素为其父元素
visibility具有继承性
子元素会继承该属性

页面对比另： visibility还有一个值为collapse 在table的tr里设置该属性则不占位在td里设置该属性则会占位其他情况跟hidden一致

JavaScript捕获和冒泡

捕获:从大目标到小目标省->市->县->乡冒泡:从小目标到大木标乡->县->市->省

addEventHander(eventType, eventListenerCallBack[, useCapture]) addEventHander(事件名,事件触发后回调函数,是否使用捕获模式/default:fasle) 获取目标元素 event.target 移除事件 removeEventHander 阻止默认行为 event.stopDefault() 阻止事件传播(捕获和冒泡) event.stopPropagation()

IE不支持捕获，只支持冒泡 attachEvent(on+evenType,handerCallBck) 获取目标元素 event.srcElement 移除事件 detachEvent 阻止默认行为 event.returnValue=false 阻止事件传播(冒泡) event.cancleBuble = true

默认行为点击a标签跳转邮件出现菜单表单提交按钮(type=submit)的提交行为

块元素和行内元素区别

块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化

块级元素可以包含行内元素和块级元素行内元素不能包含块级元素

行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效

盒子模型分哪两类,区别是什么？

标准盒子模型和IE盒子模型 content->padding->border->margin

标准盒子模型 width = content IE盒子模型 width = content+padding+border

两种盒子模型转换方法

.ie {
    box-sizing:border-box; /* 转换为IE盒子模型 表现为宽高=content+padding+border */
}
.normal{
    box-sizing:content-box; /* 转换为标准盒子模型 表现为宽高=content */
}
.inherit {
    box-sizing:inherit; /* 使用父元素的盒子模型 */
}

HTTP 缓存机制

缓存分类强缓存和协商缓存

强缓存

强缓存不会将请求发送到服务器 http状态码为200但是size列显示为from cache 强缓存用的是http协议头中的Expires和Cache-control两个字段控制,用来表示缓存时间

Expires 指定资源到期时间,该字段返回一个时间点 Expires = max-age + 请求时间，需要和Last-modified结合使用在到期时间之前的请求直接使用缓存无需再次请求
缺点：当客户端本地时间被修改以后，服务器与客户端时间偏差变大以后，就会导致缓存混乱

cache-control的优先级比Expires高 cache-control是一个数值,单位为秒，客户端自己对比，与客户端服务端时间偏差无关
Cache-Control与Expires可以在服务端配置同时启用或者启用任意一个 Cache-Control 可以由多个字段组合而成,主要有以下几个取值 max-age 在这个时间端内缓存有效单位为秒 s-maxage 同 max-age，覆盖 max-age、Expires，但仅适用于共享缓存，在私有缓存中被忽略。 public 请求可以被任何缓存给缓存（代理和客户端都可以缓存） private 不能被共享缓存被缓存，只能被缓存在私有缓存中（能被客户端不能被代理服务器缓存） no-cache 强制所有缓存了该响应的用户，在使用已缓存的数据前，发送带验证器的请求到服务器,如果资源未更改则使用缓存数据 no-store 禁止缓存，每次都去服务器拉数据 must-revalidate 如果页面是过期的，则去服务器获取

协商缓存

第一次请求是服务器会在header中添加Last-Modified Last-Modified: 标记该资源最后修改时间
再次请求时，请求头会包含If-Modified-Since
If-Modified-Since:第一次的Last-Modified的时间

如果该资源未修改则命中缓存，返回304的状态码且不会返回资源内容，也不会返回last-modified 对比的是服务端时间但是对比最后修改时间不一定准确(资源变化了最后修改时间也可能一致) Etag/If-None-Match 返回的是一个校验码 Etag可以保证资源唯一，资源变化导致Etag变化浏览器根据If-None-Match来判断是否命中

第一次请求header中返回一个Etag,之后再请求该资源header中加入If-None-Match字段值为Etag值命中304 否则返回该资源及新的Etag

Etag是为了解决Last-Modified难解决问题 1.精确到秒，可能会出现一秒内多次改动情况 2.文件定期生成,文件内容不变但Last-modified会发生改变 3.服务器无法准确获取文件修改时间 4.代理服务器时间与源服务器时间不一致

Last-Modified与Etag可同时使用,服务器优先验证Etag，一致后再验证Last-modified 都一致才返回304(同时使用情况下)

伪数组转数组

function getArray(){
    return Array.prototype.slice.call(arguments)
}
function getArray2(){
   let arr =  Array.from(arguments)
   console.log(arr instanceof Array)
}
getArray2(1,2,3,4,5)

call apply bind 区别

call,apply,bind都是为了改变当前函数的上下文，也就是改变函数this的指向
call和apply区别在于入参格式
call为逗号分隔的一个个参数
apply接收的是一个数组

自定义一个log方法代理console.log

function log(){
    // console.log.apply(console,arguments)
    //对每一条打印信息添加前缀
    let arr = Array.prototype.slice.call(arguments)
    arr.unshift("(name)")
    console.log.apply(console,arr)
}

bind()返回值为一个新函数,称谓绑定函数调用绑定函数时，绑定函数会以创建时传入的第一个参数作为this 传入bind()方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数
多次 bind() 是无效的
bind()的另外一个用法是使函数拥有预设的初始参数，即将这些参数放到bind()函数的this参数后面即可

var name="张三丰"
var wuji ={
    name:"张无忌",
    getName(){
        console.log("我的名字是:",this.name)
    },
    changeArgsToArray(){
        return Array.prototype.slice.call(arguments)
    }
}
wuji.getName()// 我的名字是: 张无忌 this为wuji对象
var getStoryName = wuji.getName
getStoryName() //我的名字是: 张三丰 this对象指向windows

var bindGetStoryName = getStoryName.bind(wuji)
bindGetStoryName()//我的名字是: 张无忌 bindGetStoryName函数的this对象永远为wuji

var getKongfu = wuji.changeArgsToArray
var bindGetKongfu = getKongfu.bind(wuji,"七伤拳")// 出岛自带 七伤拳
bindGetKongfu("乾坤大挪移","九阳真经")//["七伤拳", "乾坤大挪移", "九阳真经"]

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

http 状态码

常用状态码其实并不多
200，304，400，401，403，404，405，500，502，503，504
简单来讲
看到4XX自己找原因
看到5XX让服务端去找原因其他情况碰到极少,碰到后再去找原因即可

1XX 代表请求已被接受，需要继续处理。

这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。 HTTP/1.0 协议中没有定义任何 1xx 状态码

100 Continue 客户端应当继续发送请求这个临时响应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝。客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应,服务器必须在请求完成后向客户端发送一个最终响应

101 Switching Protocols 服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送完这个响应最后的空行后，服务器将会切换到在Upgrade 消息头中定义的那些协议。

102 Processing 由WebDAV（RFC 2518）扩展的状态码，代表处理将被继续执行。

2XX 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。

200 OK 请求已成功，请求所希望的响应头或数据体将随此响应返回. 201 Created 202 Accepted 服务器已接收请求但尚未处理。可能被拒绝也可能会执行也可能会不执行 203 Non-Authoritative Information 服务器成功处理请求但返回的实体头部元信息不是在原始服务器的有效的确定合集 204 No Content 服务器处理成功但不需要返回任何实体内容并且希望返回更新了的元信息 205 Reset Content 服务器处理了请求且没返回任何内容该返回码要求请求者重置文档视图即接受了用户输入后立即重置表单 206 Partial Content 服务器已经成功处理了部分GET请求 207 Multi-Status 扩展码代表之后的消息体为XML消息

3XX 重定向这类状态码代表需要客户端采取进一步的操作才能完成请求

300 Multiple Choices 被请求资源有一系列可供选择的回馈信息，用户或者浏览器需选择一个地址进行重定向 301 Moved Permanently 请求的资源已经被永久的移动到新位置，并且将来的引用都应该使用本响应返回的若干个URI之一 302 Move Temporarily 请求的资源临时从不同的URI相应请求 303 See Other 对当前请求的相应可以从另一个URL上找到，且客户端应该使用get访问那个资源 304 Not Modified 文档内容与上次对比无改变 305 Use Proxy 被请求资源必须通过指定的代理才能访问 306 Switch Proxy 新版本废弃 307 Temporary Redirect 请求资源临时从不同的URI相应请求

4XX 客户端错误

400 Bad Request 1.语义有误 2.请求参数有误 401 Unauthorized 需要用户验证 1.未提供包含认证头信息 2.提供的认证头信息未通过服务器验证 402 Payment Required 预留 403 Forbidden 服务器理解请求但拒绝执行,与401的区别是身份验证不能提供任何帮助 404 Not Found 请求失败，服务端未找到 405 Method Not Allowed 请求方法不能用于请求该资源如服务端提供get请求你用post就会出现这种code 406 Not Acceptable 请求资源内容特性无法满足请求头中的条件，因而无法生成响应实体 407 Proxy Authentication Required 代理服务器需要认证 408 Request Timeout 请求超时，服务器没有在客户端的等待时间内完成请求 409 Conflict 由于和被请求资源的当前状态之间存在冲突请求无法完后 410 Gone 被请求资源在服务器上已经不可用且没有任何已知的转发地址

.....

5XX 服务器错误或异常

500 Internal Server Error 服务器无法对请求进行处理 501 Not Implemented 服务器不支持当前请求多需要的某个功能 502 Bad Gateway 网关或代理服务器超时 503 Service Unavailable 服务不可用，可能是过载也可能是服务器维护 504 Gateway Timeout 网关或代理服务器超时 505 HTTP Version Not Supported 服务器不支持HTTP协议版本或者拒绝支持

openks / learn-vue

20191210_试题汇总 #132

两个div一个靠左一个靠右

display:none和visibility:hidden两者的区别

JavaScript捕获和冒泡

块元素和行内元素区别

盒子模型分哪两类,区别是什么？

HTTP 缓存机制

强缓存

协商缓存

伪数组转数组

call apply bind 区别

http 状态码

1XX 代表请求已被接受，需要继续处理。

2XX 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。

3XX 重定向这类状态码代表需要客户端采取进一步的操作才能完成请求

4XX 客户端错误

5XX 服务器错误或异常

openks / learn-vue

20191210_试题汇总 #132

两个div一个靠左一个靠右

display:none和visibility:hidden两者的区别

JavaScript捕获和冒泡

块元素和行内元素区别

盒子模型分哪两类,区别是什么？

HTTP 缓存机制

强缓存

协商缓存

伪数组转数组

call apply bind 区别

http 状态码

1XX 代表请求已被接受，需要继续处理。

2XX 这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。

3XX 重定向 这类状态码代表需要客户端采取进一步的操作才能完成请求

4XX 客户端错误

5XX 服务器错误或异常

3XX 重定向这类状态码代表需要客户端采取进一步的操作才能完成请求