CODERFE

面试——灰机wiki

7月份毕业之后一直在找一份前端方面的工作,昨天终于得到了一次面试的机会。昨天去面试,面试官给了我三道题目,太紧张了,磕磕绊绊的答了一下,不太满意,今天总结一下昨天的几道面试题。

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

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

    1
    2
    3
    4
    5
    6
    7
    .text {
    width:100px;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    tetx-overflow: ellipsis;
    }
  2. 三列布局,左右两列不定宽,中间自适应:

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .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. 鼠标滑过用户头像时出现一张卡片,鼠标移出头像时卡消失,同时鼠标在卡片上时卡片保持显示状态:

    这个题目的基本思路就是给卡片加上状态,再判断鼠标的移入移出事件。

更新日志

2016-07-27 补充第三题的思路