image

编辑人： 长安花落尽

calendar2025-05-17

message8

visits746

三道Web前端面试题

  1. 文本内容溢出后用省略号代替显示：

    这个可以直接用 text-overflow 来完成，当时竟然没有记起来这个属性。。。兼容 IE / FF / Chrome

    .text {
 width：100px;
 height: 30px;
 overflow: hidden;
 white-space: nowrap;
 tetx-overflow: ellipsis;
}

  2. 三列布局，左右两列不定宽，中间自适应：

    这道题我的思路是用 flexbox 实现，其实实现的方法也很多，可以使用 浮动 / 绝对定位等

      .container {
    position: relative;
    height: 50px;
    border: 1px solid #111;
    line-height: 50px;
  }
  .left,
  .right {
    position: absolute;
    top: 0;
  }
  .left {
    left: 0;
    background-color: darkkhaki;
  }
  .right {
    right: 0;
    background-color: cadetblue;
  }

  3. 鼠标滑过用户头像时出现一张卡片，鼠标移出头像时卡消失，同时鼠标在卡片上时卡片保持显示状态：

喵呜刷题：让学习像火箭一样快速，快来微信扫码，体验免费刷题服务，开启你的学习加速器！

创作类型：
原创

本文链接：三道Web前端面试题

版权声明：本站点所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。
分享文章
share