面筋系列②——滴滴实习生一面凉经

前言

    上次投递了滴滴官网的实习生后，过了两三天就约了面试，面试的时候一共问了下面一共16个问题。问题相对校招的题目来看不是很难，我也答对其中十来个题目，整体答下来自我感觉还行（第一次面试有点紧张）。答完之后面试官说我表现不错，说之后会有人联系我，然后我等了几天没电话，就加了邮件中的联系人问问，结果就是如图。

    总结一下原因的话，我觉得可能自己回答的时候思路不是很清晰，没有做到能按点罗列，以及回答的深度不够，有些问题没答到本质上。再接再厉吧。开学前没找到好点的公司实习，就去学校长沙那边再找实习的公司。讲了一大堆废话，大家直接看题目吧。

滴滴实习生一面题目及解答

1. 你对盒子模型的理解？

    第一次面试，有点紧张，导致这么简单的题，居然没回答完整…

    主要就是要把这两个都说全比较好一点

• 标准盒子模型
  
• IE盒子模型
  

图片来源自 css盒子模型

2. HTML5添加了哪些新标签？

template、section、nav、article、aside、header、footer、main、canvas、svg、video、audio、source、track、menu

HTML语义化

    不同功能的盒子要用能表示相对应功能的HTML标签
    作用：

• ①让人更容易读懂（增加代码可读性，利于维护）
• ②让搜索引擎更容易“读懂”（SEO）

    前一天晚上稍微看了一下，但是只答出video跟audio两个，可能平时用得不多的原因…其实到这我已经很紧张了，不过还好后面的题目都还答得挺好的。

3. 块级标签、行内标签有哪些？有什么区别？本质区别？

（1）块级元素

• div、p、h1-h6、ul、ol、dl、li、header、footer、aside、section、article、form、table

（2）行内元素

• span、img、button、input、b、q、i、a、em、label

（3）区别

    我以前没有认真看过这个相关区别，只说了块级标签是单独占一行，而行内标签是挨着排列，直到浏览器边缘才换行。后面他又补问了一句本质区别是什么，你知道吗？

（4）本质区别

• 行内元素 设置width，height属性无效

• 行内元素 起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果

• 行内元素 设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响

• 块级元素 可以设置width，height属性

4. 如何设置值改变其行内或是块级？

直接设置display为block、inline、inline-block但后两者是有区别的

• block 就不讲了，就是上面第3点讲的块级元素
• inline：将标签设置为行内标签，不可设置宽高
• inline-block：将标签设置为行内块级标签，可设置宽高

5. CSS定位讲一下，有哪些定位，fixed是相对哪个定位的？

• ① static：是 position 属性的默认值。如果省略 position 属性，浏览器就认为该元素是 static 定位。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效
• ② relative：相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置。 它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离
• ③ absolute：相对于父级定位设置为relative的元素偏移，会一层层往上寻找，直至找到根元素，相当于浏览器页面定位。它必须搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离
• ④ fixed：相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。元素的位置通过 left、top、right 以及 bottom 属性进行规定
• ⑤ sticky： 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口比如型表格滚动的时候，表头始终固定。sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作 sticky 的生效门槛

6. 水平垂直居中有哪些方式？

（1）水平居中

• inline元素：text-align：center
• block元素：margin：0 auto
• 直接absolute：（ left：50% + margin-left：负值）
• translateX
• flex：（ display: flex;     justify-content: center;）

（2）垂直居中

• inline元素：height = line-height
• absolute：（ top：50% + margin-top：负值 ）
• translateY
• flex：（display: flex;     flex-direction: column;     justify-content: center;）

7. 浮动有哪些？设置浮动造成的影响是什么？

（1）float浮动

• none: 表示不浮动，默认
• left: 表示左浮动
• right：表示右浮动

（2）造成的影响是什么？

• 设置浮动属性的元素会脱离标准流，会将元素移动到指定的位置

（3）如何清除浮动

• 选择器 {clear: 属性值}; clear:清除
• 父级添加overflow:hidden即可
• 使用after伪元素清除浮动
• 父元素也设成 float
• 父元素设置 display:table

8. 基本数据类型有哪些？

值类型

• String、undefinded、Boolean、Number、Symbol

引用类型

• Object、Null

9. 讲一下闭包？

（1）闭包是什么

• 简单地说，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁
• 可以如此理解：闭包就像函数背了一个小书包，这个书包里面装了函数出生之后就要用到的一些东西，用专业一点的语言来描述就是在一个父函数中返回子函数，子函数中如果引用到了父函数中变量，则这些变量会成为一个闭包，在子函数的生命周期内都可以获取到（参考自 一篇总结搞定秋招）

（2）闭包的表现形式

• 返回一个函数
• 作为函数参数传递
• 回调函数
• 非典型闭包IIFE(立即执行函数表达式)

（3）闭包应用场景

• 变量长期驻扎在内存中
• 避免全局变量的污染
• 私有成员的存在
• 模块化封装,以及HOC等

（4）闭包的缺点

• 由于闭包会引用包含它的外层函数作用域里的变量/函数，因此会比其他非闭包形式的函数占用更多内存
• 当外层函数执行完毕退出函数调用栈（call stack）的时候，外层函数作用域里变量因为被引用着，可能并不会被JS引擎的垃圾回收器回收，因而会引起内存泄漏。过度使用闭包，会导致内存占用过多，甚至内存泄漏

10. JS事件有哪些？

    这题属于复习盲点，只讲了一下点击、拖拽、放大放小等鼠标事件

• ① UI事件：当用户与页面上的元素交互时触发

  • DOMActivate：表示元素已经被用户操作（通过鼠标或键盘）激活
  • load：当页面完全加载完后在window上面触发
  • unload：当页面完全卸载后在window上面触发（与上面相反）
  • abort：当用户停止下载过程时，如果嵌入内容没有加载完，则在