前端面试开胃菜，5个经典问题瞬间查漏补缺

2024-02-16 09:48:27

前端面试中，经常会遇到各种各样的问题，这些问题涵盖了HTML/CSS、JavaScript、算法、项目经历等各个方面。为了帮助您快速查漏补缺，为面试做好准备，本文整理了5个前端面试高频题，希望能对您有所帮助。

1. 未知宽高，如何实现图片自适应？

在很多情况下，我们无法确定图片的宽高，因此需要使用CSS来实现图片自适应。实现方法有很多种，以下列举其中一种：

img {
  max-width: 100%;
  height: auto;
}

这种方法会使图片的宽度始终不超过其容器的宽度，而高度则根据图片的实际比例自动调整。

2. 如何实现元素的垂直居中？

元素的垂直居中是指元素在父元素中垂直方向居中。实现方法有很多种，以下列举其中一种：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  margin: auto;
}

这种方法会使元素在父元素中水平和垂直方向都居中。

3. 如何实现元素的水平居中？

元素的水平居中是指元素在父元素中水平方向居中。实现方法有很多种，以下列举其中一种：

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

这种方法会使元素在父元素中水平居中，但不会垂直居中。

4. 如何实现元素的固定定位？

元素的固定定位是指元素在页面中始终保持在指定的位置，无论页面如何滚动，元素都不会移动。实现方法有很多种，以下列举其中一种：

.fixed-element {
  position: fixed;
  top: 0;
  left: 0;
}

这种方法会使元素始终固定在页面左上角。

5. 如何实现元素的拖拽？

元素的拖拽是指用户可以通过鼠标将元素拖动到另一个位置。实现方法有很多种，以下列举其中一种：

const draggableElement = document.querySelector('.draggable-element');

draggableElement.addEventListener('mousedown', (event) => {
  // 获取元素的初始位置
  const initialX = event.clientX;
  const initialY = event.clientY;

  // 获取元素的初始位置
  const elementX = draggableElement.offsetLeft;
  const elementY = draggableElement.offsetTop;

  // 监听鼠标移动事件
  document.addEventListener('mousemove', (event) => {
    // 计算鼠标移动的距离
    const deltaX = event.clientX - initialX;
    const deltaY = event.clientY - initialY;

    // 更新元素的位置
    draggableElement.style.left = `${elementX + deltaX}px`;
    draggableElement.style.top = `${elementY + deltaY}px`;
  });

  // 监听鼠标松开事件
  document.addEventListener('mouseup', () => {
    // 移除鼠标移动事件监听器
    document.removeEventListener('mousemove');
  });
});