前端面试题

以下是一些前端面试题：

一、HTML/CSS部分

1. 如何实现一个自适应的图片容器，在不同屏幕尺寸下图片按比例缩放且不失真？

   • 答案：
     • 方法一：使用max - width和height: auto属性。
       • 在CSS中为图片设置max - width: 100%; height: auto;，这样图片会根据其容器的大小按比例缩放，并且不会出现失真的情况。
     • 方法二：使用object - fit属性（适用于现代浏览器）。
       • 如果希望图片填充整个容器并且保持比例，可以设置object - fit: cover;；如果希望图片完整显示在容器内并且可能留白，可以设置object - fit: contain;。

2. CSS中display: none和visibility: hidden有什么区别？

   • 答案：
     • display: none：
       • 元素完全从页面布局中移除，不占据任何空间，其后的元素会占据该元素原本的空间位置。
       • 例如，当隐藏一个导航菜单时，如果使用display: none，菜单所在的空间将空出，后面的内容会向上移动。
     • visibility: hidden：
       • 元素仍然占据页面布局中的空间，只是不可见。
       • 例如，当隐藏一个装饰性元素时，如果使用visibility: hidden，它所在的空间仍然保留，后面的元素不会移动。

3. 如何使用CSS实现一个简单的动画效果（如淡入淡出）？

   • 答案：
     • 可以使用CSS的transition属性或者@keyframes规则结合animation属性来实现淡入淡出效果。
     • 使用transition实现淡入淡出（以一个div元素为例）：
       • HTML：

       <div class="fade - element"></div>
       

       • CSS：

       .fade - element {
                
                
         opacit