一个来自一淘的简单面试题
很久前的yisi在微博上发的一淘面试题，整理文件的时候挖出来的。 比较简单的一道题目，考察点主要有负边距，po …
一个简单的面试题
很久前的yisi在微博上发的一淘面试题，整理文件的时候挖出来的。
比较简单的一道题目，考察点主要有负边距，position定位，z-index层级，layout等。
看代码：
dom结构：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
考虑性能的话还要加上类名，通过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