前端面试题

以下是一些前端面试题:

一、HTML/CSS部分

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

    • 答案
      • 方法一:使用max - widthheight: auto属性。
        • 在CSS中为图片设置max - width: 100%; height: auto;,这样图片会根据其容器的大小按比例缩放,并且不会出现失真的情况。
      • 方法二:使用object - fit属性(适用于现代浏览器)。
        • 如果希望图片填充整个容器并且保持比例,可以设置object - fit: cover;;如果希望图片完整显示在容器内并且可能留白,可以设置object - fit: contain;
  2. CSS中display: nonevisibility: 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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值