面试题整理

面试整理

---

前言

一、浏览器的兼容问题

• 不同浏览器的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

十四、

总结