前端面试一

前端面试一

  1. 实现垂直居中的方法
  • 文字类直接设置line-height
  • 父元素position: relative; 子元素 position: absolute; top: 50%; margin-top: 自身高度的一半;
  • flex布局,父元素设置display: flex;子元素margin: auto;
  • css3 父元素position: relative; 子元素 position: absolute; transform: translateY (50%)
  • table布局,父元素display: table;子元素display: table-cell; vertical-align: middle; 这几个的优缺点?
  1. position的值有哪些,怎么用?
  • static 正常
  • relative 相对于自身定位 原位置保留
  • absolute 脱离文档流 相对于最近祖先元素不为static的元素定位,否则body
  • fixed 相对于窗口定位
  • sticky 属于relative和fixed的结合体 这个是最近看的项目中没用过,但是他考我实现一个东西,哭了,我觉得我应该实际操作一下的
  1. 问了一个列表处理,我说无限滚动,他问我怎么实现
    说实话这个我看过,没看懂放弃了,只知道原理是使用padding-top,撑开高度占位
  2. 由3引出监听scroll事件而产生的性能优化,节流防抖
  • 防抖的本质是频繁触发事件,销毁前一次的执行,执行最后一次点击的事件,口述一下代码,一进去清除定时器
  • 节流的思想是频繁触发事件,控制这个事件多长时间执行一次,无论点击多少次它都有自己的规律,口述一下代码,定时器里添加一个标志表示这个事件在进行,进行过程中不触发事件
  • 继续深入问有没有更好的办法,把节流防抖结合在一起,没问怎么写代码,自己也没写过……
  1. css3动画
    这个常用的就是transform,transition,animation(脑子卡壳把transition忘了,最后才说出来的)

之后就没问我了,js一点都没问...

平静下来思考其实觉得问的问题很细致深入,很考验一个人的实际工作能力,加油吖!

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.fengpt.cn/archives/前端面试一