面试整理
文章目录
前言
一、浏览器的兼容问题
- 不同浏览器的margin和padding不同
解决:全局设置样式
*{
padding:0;
margin:0;
}
- 在块属性标签float后,有横行的margin,在IE6中,margin比设置的要大
解决:将块属性标签设置display:inline;行内元素 - 设置较小高度标签,IE6和IE7会比设置的高度大
解决:对高出的标签设置overflow:hidden; - 行内元素在设置display:block;后float,又出现了横行margin
解决:在display:block;后设置display:inlin;display:table; - 图片有默认间距
img标签放在一起会有浏览器默认间距
解决:用float布局
二、vue如何自定义指令
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
三、flex布局有哪些属性
链接:link
四、数组去重的方法
链接link
五、vue路由底层实现的原理是什么
- hash
通过检测hash事件,通过hash值的改变,来改变页面样式,并且页面不会变化
六、Tcp的三次握手
在通过第一步的DNS域名解析后,获取到了服务器的IP地址,在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接。
-
第一次握手: 建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;
-
第二次握手: 服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
-
第三次握手: 客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。
完成三次握手,客户端与服务器开始传送数据。
七、输入url到页面加载完成,浏览器发生了什么
1.浏览器检测当前url是否有缓存,缓存是否过期
2.DNS解析url对应的ip
3.通过ip建立TCP链接
4.http发送请求
5.服务器处理请求,浏览器响应Http
6.渲染页面,建立DOM树
7.关闭TCP链接
八、状态码
- 401:没有token或token过期
- 404:当前页面不存在
- 200:请求成功
- 500:服务器端错误
九、块元素居中
- 水平
1.margin:0 auto;
2.display:flex;justify-content:center;
3.绝对定位:position:absolute;left:50%:transform:translate(-50%,-50%) - 垂直
1.display:flex; align-items:center;
2.line-height
3.绝对定位:position:absolute;top:50%:transform:translate(-50%,-50%)
十、父相子绝
子绝父相的意思是在父类的position属性是relative的情况下,子类的position属性又是absolute的情况下
十一、清除浮动
- 由于父元素的高度有子元素撑开,子元素浮动后,父元素的高度为0
1.clear:float;/clear:both;
2.overflow:hidden;
3.after伪元素(IE6/7不支持)
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
4.before伪元素
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
十二、重绘重排
十三、如何判断数据类型
1.typeof
2.instanceof
3.constructor