标签: interview

  • 一个来自一淘的简单面试题

    interview etao
    一个简单的面试题

    很久前的yisi在微博上发的一淘面试题,整理文件的时候挖出来的。

    比较简单的一道题目,考察点主要有负边距,position定位,z-index层级,layout等。
    看代码:
    dom结构:

        
    

    考虑性能的话还要加上类名,通过tags来解析样式速度慢,因为这里不涉及到具体的业务,就不做处理了。
    关于类名命名方式之类的,虽然也很重要,但这里也不说,非要说点什么的话,那就是和公司或者社区的尽量保持一致性。

    css:

        ul {
          width: 150px;
          list-style-type: none;
        }
        ul li {
          float: left;
        }
        ul a {
          position: relative;
          float: left;
          margin: 0 -5px -5px 0;
          border: 5px solid blue;
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
        ul a:hover {
          border-color: red;
          z-index: 99;
        }
    
      虽然效果写出来了,但是代码中其实还是有两处不清楚的地方,有人知道的话麻烦告知一下:

    • 1.用 list-style-type: none; 好,还是用 list-style: none; 好,都能达到效果,但是 list-style 里还包括了除type外的其他属性。不知道哪个性能好,或者有其他优势。这就像用 background 时一样,有人直接用background加个颜色,而有人用 background-color, 虽然写的时候没什么问题,但是重构的时候可能因为用了 background 而把其他叠加的 background 其他样式覆盖掉。但是这里的属性值是 none, 就不存在覆盖不覆盖的问题了。个人倾向于使用具体一点的list-style-type.
    • 2.list-style-type 或者 list-style 写在 ul 中还是写在 li 中好,在支付宝的前端 ui 框架爱丽丝中知道 ul 的list-style-type 是可以继承的,写在两个地方都能实现相同的效果。不知道哪种好。爱丽丝中是写在 ul,我个人也倾向于写在 ul 中,我喜欢能写在模块外层上的样式尽量写在外层。

    这题目中还有很多可以写的地方,就不展开来讲了。
    题目效果
    update:
    吃个饭回来,想到为毛这里用 ul 是语义化,于是改成用div了,dom结构瞬间简单了很多。
    例子见:
    题目效果2