首页 > 代码库 > 金斧子前端面试（div+css九宫格制作及文字居图片上面中间问题）
金斧子前端面试（div+css九宫格制作及文字居图片上面中间问题）
很幸运地在金斧子正要招前端实习生的时候，我投了简历。收到金斧子的面试邀请，我兴奋得连着两天晚上失眠。
没有笔试，直接由部门老大面试。第一步自我介绍。我讲了我转行的原因，也表明了对前端技术的热情。之后面试官问我的学习途径。我讲完后，顺带提出自己有做几个小作品，来总结自己的知识点。预料中，面试官提出看作品。展示完各个作品后，讲解我的源码。到这里，看得出面试官还是挺满意的。面试官说，主要是想招一个静态页面制作的实习生，于是问了我两个问题。
第一个：九宫格制作，在鼠标滑入的时候，小格边框变色，且边框不能重叠。说实话，这个时候，我完全没有思路，尽在想怎么实现边框变色，不能重叠。其实，这个时候最好的做法是：一步步来，先讲明用ul、li来制作九宫格，之后解决边框重叠问题，用margin的负值完成。之后再讲边框变色的思路。遗憾的是，我什么都没讲出来。面试官告诉我思路：用margin负值和z-index来实现。这个时候，我立即表明自己会，有点马后炮。这充分说明了，对单个知识点了解，并不代表会用。接着我向面试官表明，回去我会自己捣鼓一下，以表明自己的学习态度。面试回家后，自己琢磨了一下。代码如下：
<html>
<head>
<style>
body, ul, li {margin: 0px; padding: 0px;}
ul {margin-left: 25px; margin-top: 25px; list-style-type:none; width: 303px; height: 303px;}
li {border: 1px solid black; width: 100px; height: 100px; margin-left: -1px; margin-top: -1px; z-index: 1; float: left; position: relative;}
li:hover {border-color: red; z-index: 2; border-right: 1px solid red; border-bottom: 1px solid red;}
</style>
</head>
<body>
<ul>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</body>
</html>
最开始的时候，没有在li内加上position：relative，无论我怎样调试，总有几个格子只会有两条边框变成红色。试了很久，结果依然如此。于是，我尝试着去思考margin负值的作用，然后想到，margin-left和margin-top的值应该是相对的，于是，我添加了position：relative。果然，这回行了！凡事应该多思考该怎样做，为什么这样做。
第二个问题：在pc端，有一个div框，框里有一张图片和几个文字，如何让文字显示在图片的上方且居中（居图片的中间）。我想了想，觉得应该用position定位来实现。面试官告诉我，不行。我又懵了。思路是：1.position，不行；2.flex布局，不行；3.tabel-cell布局，不行；4. js，太麻烦。原因是需要考虑浏览器兼容性。然后我询问正确的做法，面试官说我现在还无法理解，这是需要大量经验才能想出来的。但我坚持让面试官讲，正确的应该是，添加空标签，再设置vertical-align： middle。…… 这里面试官讲的很快，估计是觉得我懂不了吧，所以我没怎么听清楚完整思路。我也问了为什么要加空标签，面试官露出迷之高深微笑：你回去试了就知道了。然而，我回来捣鼓了好久，也不行。只会用JS来实现，但确实很麻烦。。。
所以，第二个问题，等我解决了在贴上代码。
最后，面试官说他没问题了（都没问我JS好吗！），轮到我提问。我提了两个问题： 精通html、css、JS大概需要多长时间（不计个人学习能力）？回答： 这些是靠实际项目积累出来的，光有理论知识，永远也不可能精通，而且，还需要有一个好的师傅带路。第二个问题：在大概掌握html、css和JS之后，时继续深入学习JS还是学习各个框架？回答：应该将基础打牢，这个时候去看框架什么的，只会知其然而不知其所以然。这是在浪费时间。
最后的最后，面试官说让人事部的来和我聊，然后就向风一样走了，我还没来得及问联系方式啊。。。这时，我以为是让人事部的过来跟我谈人生，谈薪资等，想着应该是要我才会让人事部的姐姐过来跟我聊，给我兴奋坏了。事实证明，我还是太年轻不懂事了。hr姐姐过来告诉我：下周通知结果，现在公司招聘量有点大。。。。尼玛，我之前在兴奋个啥！这该不会又是被婉拒了吧。。然而我又有啥办法。上帝保佑我过吧！阿门！
金斧子前端面试（div+css九宫格制作及文字居图片上面中间问题）