前端小白菜的苦乐面试记：从面试官对不起到找实习没那么难！

前言

作为一名前端小白菜，我也想找到实习来着，于是乎就面了面。先来给所有的问题给大家分享吧。

一、面试题

1. CSS 实现水平垂直居中

题目 如何使用 CSS 实现水平垂直居中？

回答： 可以使用如下方法之一来实现水平垂直居中：

• 使用绝对定位：将元素设置为绝对定位，然后使用 left 和 top 属性将其居中。
• 使用弹性盒模型：将元素设置为弹性盒容器，然后使用 justify-content 和 align-items 属性将其居中。
• 使用网格布局：将元素设置为网格容器，然后使用 justify-content 和 align-items 属性将其居中。
• 使用 transform 属性：将元素的 transform 属性设置为 translate(-50%, -50%)，即可实现水平垂直居中。

2. Flex的属性

题目： Flex有哪些属性？

回答： Flex的属性包括：

• flex-direction：规定元素在主轴方向的排列方式，可选值有 row、row-reverse、column、column-reverse。
• flex-wrap：规定元素在主轴方向上是否换行，可选值有 nowrap、wrap、wrap-reverse。
• justify-content：规定元素在主轴方向上的对齐方式，可选值有 flex-start、flex-end、center、space-between、space-around。
• align-items：规定元素在交叉轴方向上的对齐方式，可选值有 flex-start、flex-end、center、baseline、stretch。
• align-content：规定元素在交叉轴方向上的对齐方式，可选值有 flex-start、flex-end、center、space-between、space-around、stretch。

3. CSS Transition的实现效果和有哪些属性

题目： CSS Transition的实现效果和有哪些属性？

回答： CSS Transition的实现效果是当元素的属性值发生变化时，可以使用动画效果来过渡。

CSS Transition的属性包括：

• transition-property：规定元素哪些属性发生变化时可以使用动画效果过渡，可选值是一个或多个属性的名称。
• transition-duration：规定动画效果持续的时间，可选值是一个数字（单位是秒）或一个时间值（例如 500ms）。
• transition-timing-function：规定动画效果的过渡方式，可选值有 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier(cubic-bezier(n, n, n, n))。
• transition-delay：规定动画效果的延迟时间，可选值是一个数字（单位是秒）或一个时间值（例如 500ms）。

4. CSS 实现沿Y轴旋转3

题目描述： 如何使用 CSS 实现沿Y轴旋转3？

回答： 可以使用如下方法之一来实现沿Y轴旋转3：

• 使用 transform 属性：将元素的 transform 属性设置为 rotateY(3deg)，即可实现沿Y轴旋转3。
• 使用 3D 变换：将元素的 transform-style 属性设置为 preserve-3d，然后将元素的 transform 属性设置为 rotateY(3deg)，即可实现沿Y轴旋转3。

二、我的面试经历

1. 一面凉经泪目

第一次面试，我紧张得不行，连自我介绍都磕磕绊绊的。面试官问了我一些基础的 CSS 问题，我勉强回答了几道。然后面试官问了我一个问题：“Promise 是什么？”我当时懵了，完全不知道这是什么。面试官叹了口气，说：“看来你还没有学到Promise，那今天就到这里吧。”

走出面试室，我感到非常沮丧。我暗自下定决心，一定要好好学习 Promise，下次再面试一定要给面试官一个惊喜。

2. 二面旗开得胜

经过一个星期的努力学习，我终于弄懂了 Promise。于是，我信心满满地去参加了第二次面试。这次面试，面试官问了我很多问题，但我都能从容作答。面试官对我的表现非常满意，最后给了我一个实习机会。

结语

面试成功后，我感到非常高兴。我知道，这只是我职业生涯的起点，还有很多东西要学。但我相信，只要我努力学习，不断进步，就一定能成为一名优秀的前端工程师。

希望这篇文章能给各位前端小白菜一些启发。面试官对不起！我终于会了 Promise。如果你也有面试的经历，欢迎在评论区留言分享。