2020前端面试题

JavaScript

• addEventListener最后一个参数的作用：

规定事件是冒泡还是捕获。false是冒泡，true是捕获

• 什么是冒泡及捕获

元素触发某个事件，向上级传递，直到document。

捕获是从不具体的传至具体的

• 所有事件都可以冒泡吗

blur focus load unload abort不可冒泡

• 取消事件冒泡方式

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

• 判断是不是数组

1. 判断的数据 instanceof Array

2. Object.prototype.toString()方法

3. Array.isArray()

• 类数组对象转化为数组

Array.prototype.slice.call()

CSS

• float高度塌陷解决方案

1. 在父元素结束之前添加<div style="clear:both;"></div>

   缺点：增加了无意义标签

2. 父元素设置overflow:hidden;zoom:1

   缺点：要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以此方法是有不小的局限性的。

3. 父元素本身也浮动

4. 给父元素固定高度

5. 父元素设置display:inline-block

   缺点：宽度丢失

6. 通过after伪类

.testClear::after {

content: ""; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/

display: block; /*使生成的元素以块级元素显示，占满剩余空间*/

height: 0; /*避免生成的内容破坏原有空间的高度*/

clear: both; /*闭合浮动*/

visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/

}

• 文本太长如何显示3个点

css3中的test-overflow：elipsis

其他

• 什么是doctype

标准通用标记语言的文档类型说明，用来告诉标准通信标记语言解析器要使用什么文档类型定义DTD来解析文档

• 渐进增强及优雅降级

1. 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
2. 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。