记第一次面试-web前端实习生

形式：电话面试

首先先自我介绍，太紧张了，没想起来记题目，不是很完整。面试官是个小姐姐，人很好，会引导着让我回答问题。
自我介绍完直接问问题。

问题（顺序是乱的）：

1.display:none和visibility:hidden的区别？
参考资料：https://blog.csdn.net/qq_38128179/article/details/80794397跳转链接-三者区别
答：这两个属性都可以隐藏元素。区别在于：
如果一个元素设置了display:none; 属性，该元素及其后代元素都会被隐藏，隐藏后的元素宽度、高度等属性值都将“丢失”，占据的空间位置消失。
如果设置为visibility:hidden;属性，该元素会被隐藏，但是仍占据控件位置，即仍然具有宽度、高度等属性值。并且该属性具有继承性，父元素设置该属性后，子元素也会继承这个属性，重新给子元素设置visibility:visible;子元素又可以显示。
注意： visibility:hidden不影响计数器计数，隐藏元素仍然会被计数。

2.怎么实现元素垂直居中？
答：当时只答上了flex布局的方法，一个大概。
参考资料：https://blog.csdn.net/weixin_41305441/article/details/89886846跳转链接-实现元素垂直居中
以下是参考此篇文章自己实操的记录和理解，上面这篇文章有更详细的内容。

知道需要居中的元素的宽高时

• 方法1：absolute + 负margin

.father{
    /* 父元素 */
    width: 300px;
    height: 300px;
    border: 1px solid #000000;
    position: relative;
   }
.son{
    /* 子元素 */
    background-color: red;
    width: 100px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 设置top和left后是元素左上顶点挪动到父元素中间，整个元素居中需要将元素向上，向左挪动高度，宽度的一半 */
    margin-top: -25px; 
    margin-left: -50px;
   }

效果展示

• 方法2：absolute + margin auto

.father{
    width: 300px;
    height: 200px;
    border: 1px solid #000000;
    position: relative;
   }
.son{
    background-color: red;
    width: 100px;
    height: 50px;
    /* display: inline-block; */
    /* 没有理解这个属性的作用 */
    position: absolute;
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
    margin:auto;
    /* 文字居中 */
    text-align: center;
    line-height: 50px;
   }

效果展示

方法3：和方法一差不多，只是放在一起，使用calc进行计算。

.father{
    width: 300px;
    height: 200px;
    border: 1px solid #87CEEB;
    position: relative;
   }
   .son{
    background-color: red;
    width: 100px;
    height: 50px;
    position: absolute;
    top: calc(50% - 25px);
    left:calc(50% - 50px);
    /* 文字居中 */
    text-align: center;
    line-height: 50px;
   }

 

当居中元素知道宽高的时候，设置居中的方式比较简单单一。三种方法的本质是一样的，都是对居中元素进行绝对定位，在定位到上50%，左50%后再拉回居中元素的一半宽高实现真正的居中。三种方式的区别就在于拉回元素本身宽高的方式不同。

需要居中的元素宽高未知时
方法4：absolute + transform

.father{
    width: 300px;
    height: 200px;
    border: 1px solid #87CEEB;
    position: relative;
   }
.son{
    background-color: red;
    /* width: 100px;
    height: 50px; */
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50% , -50%);
    /* 文字居中 */
    text-align: center;
    line-height: 50px;
   }

效果展示

方法5：flex布局

.father{
     width: 300px;
     height: 200px;
     border: 1px solid #000000;
     display: flex;
     justify-content: center;
     align-items: center;
   }
.son{
    width: 100px;
    height: 50px;
    background:yellowgreen;
    text-align: center;
    line-height: 50px;
   }

效果展示

方法6：table-cell布局

.father{
     width: 300px;
     height: 200px;
     border: 1px solid #000000;
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
   /*注意：即使不设置子元素为行块元素也不会独占一层*/
   .son{
     width: 100px;
     height: 50px;
     background:yellowgreen;
     text-align: center;
     line-height: 50px;
     display: inline-block; /*元素为块级元素时，需要设置为行内元素*/
   }

3.flex布局（因为上题回答了flex布局方法，所以就问了flex布局）
答：
参考：flex布局思维导图整理
参考：flex布局详解

4.CSS3的新增属性有哪些？
答：
参考：CSS3常用的新增属性

5.HTML5新增标签有哪些？
答：
section：定义文档中的一个章节
nav：定义只包含导航链接的章节
header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。
footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
更多详见：HTML5教程

6.js了解哪些？说一下闭包。
答：

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

7.setTimeout()与setInterval()的区别
答：两个都是计时器，简单理解就是setTimeout只会在页面载入时调用一次，在延迟指定时间后执行一次表达式，setInterval在页面载入后会不断循环调用，直到用户手动停止。

在动态加载的页面中，一定要清理循环定时器。有时候重复设置定时器，严重的时候会导致内存泄露，最终页面崩溃。

深入理解参考：setTimeout()和setInterval()方法的区别？

8.jQuery了解多少？怎么获取元素？
答：没有系统学过jQuery，只是做大作业的时候做特效使用到，简历里写了下，面试官就问了jQuery，所以如果没有了解过的还是不要随便往简历上写，容易悲剧。现在一般学过vue，react等流行前端框架，问这些比较多。
参考文章：Jquery获取元素方法

9.还有什么问题想要问面试官的？
答：这个自由发挥（我也不是很清楚），当时问了下入职有没培训，因为招聘要求上要求会ps，问了下平时工作是要切图或者什么方面需要设计吗。

总结经验：要记得记录面试题，方便复盘。不要太紧张，要尽量在回答面试官提出的问题后，发散一下讲一下相关知识。回答问题时自信大声一点，面试官偶尔会听不清。