以下是一些前端面试题:
一、HTML/CSS部分
-
如何实现一个自适应的图片容器,在不同屏幕尺寸下图片按比例缩放且不失真?
- 答案:
- 方法一:使用
max - width
和height: auto
属性。- 在CSS中为图片设置
max - width: 100%; height: auto;
,这样图片会根据其容器的大小按比例缩放,并且不会出现失真的情况。
- 在CSS中为图片设置
- 方法二:使用
object - fit
属性(适用于现代浏览器)。- 如果希望图片填充整个容器并且保持比例,可以设置
object - fit: cover;
;如果希望图片完整显示在容器内并且可能留白,可以设置object - fit: contain;
。
- 如果希望图片填充整个容器并且保持比例,可以设置
- 方法一:使用
- 答案:
-
CSS中
display: none
和visibility: hidden
有什么区别?- 答案:
display: none
:- 元素完全从页面布局中移除,不占据任何空间,其后的元素会占据该元素原本的空间位置。
- 例如,当隐藏一个导航菜单时,如果使用
display: none
,菜单所在的空间将空出,后面的内容会向上移动。
visibility: hidden
:- 元素仍然占据页面布局中的空间,只是不可见。
- 例如,当隐藏一个装饰性元素时,如果使用
visibility: hidden
,它所在的空间仍然保留,后面的元素不会移动。
- 答案:
-
如何使用CSS实现一个简单的动画效果(如淡入淡出)?
- 答案:
- 可以使用CSS的
transition
属性或者@keyframes
规则结合animation
属性来实现淡入淡出效果。 - 使用
transition
实现淡入淡出(以一个div
元素为例):- HTML:
<div class="fade - element"></div>
- CSS:
.fade - element { opacit
- 可以使用CSS的
- 答案: