近期面试感受

这两天大概面了5、6位应届的同学,最后往往忍不住聊的多了些,有点开复老师的感觉了。归纳下来有几个突出的问题。

1. 在公司实习学不到技术,学到的只是做事的方式
这些做事的方式(或者说技巧)有些是必要的,比如沟通方面。但更多是没有价值的,比如大公司繁琐的流程,各种毫无道理的开发规范,拖沓的做事风格等等。对于技术人员来说技巧性的东西千万不能太重。一个技术团队如果让实习生学不到专业上的东西,可以质疑其专业性了。应届生在学校,在公司如果都接触不到最专业的技术,那么他们又怎么能成长起来呢。一个恶性循环的开始。前端开发岗位的需求这么大,但始终缺少专业人才的一个根本原因吧。

2. 用的不是技术,更多是技巧
由于在学校里没有系统的前端开发课程,导致对html/css/javascript基本概念的理解非常薄弱。大部分人的学习方式是:先看书,然后觉得书和实践离得很远就直接实践,遇到问题就去网上搜,而搜到的基本都是“技巧”性的东西。或者是跟着学校里的“牛人”学,掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果,写出html和css(见下图)。这是我的一道笔试题,看起来很简单吧。但是还没有人答出最佳答案。如果去网上看,国内那些大网站们是怎么实现的,就不能怪他们了。

笔试题1

a方案 – 百度新闻首页:

<table>
 <tr>
  <td valign="top" class="imgtd">
   <a ...><img ...></a>
 </td>
 <td valign="top">...</td>
 </tr>
</table>

html结构丑陋,但css简单。

b方案 – 新浪微博首页:

<div class="twit_item MIB_linedot2">
  <div class="twit_item_pic">
    <a href="" target="_blank">
      <img src="" ...>
    </a>
  </div>
  <div class="twit_item_content">
   ....
  </div>
</div>

css实现:

.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;}
.twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}

大部分应试者都是这个答案。用了浮动就必须定宽,结构就失去灵活性,同时必须解决浮动带来的一系列问题。

c方案 – 网易首页:

<div class="imgText-temp-1 dotline clearfix">
	<div class="mod-img main-img">
		<a href=""><img src="" ...></a>
	</div>
	<ul class="mod-list main-list">
	<li>...</li>
	<li>...</li>
	<li>...</li>
	<li>...</li>
	</ul>
</div>

css实现:

.imgText-temp-1 { overflow:hidden;padding-left:132px;margin-bottom:3px; }
.imgText-temp-1 .main-img { position:absolute;_display:inline;margin-left:-132px; }

作者意识到float的问题,他用了一个技巧:在容器左侧挤出一个132px的空白,再让.main-img定位为absolute,再向左移132px。
此方案典型的技巧性太重,不是应用技术解决问题,这是不应该提倡的。

这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念, 就不会这么写了。触发了BFC的块级元素,它的边缘不会和float box重叠。所以正解是:

<div class="item">
  <div class="pic">...</div>
  <div class="content">...</div>
</div>

css实现:

.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */

demo: http://hikejun.com/demo/css/demo_list.html

笔试有几年经验的人也是鲜有答对的。在新技术风起云涌的今天,太忽略基础的东西了。

3. “搜索”式学习害人不浅
面试中有同学觉得书上写的东西不实用,更喜欢边实践边学。但往往实践中主要解决具体问题,比如要实现上面那个例子,从网上搜到一个不好的例子,自己又不足以区分好坏。然后,就把它当成一个解决问题的模式,如果没人纠正,可能几年下来都这么用。网上的资源非常丰富,要区分“技术”和“技巧”。还是那句话,对技术人员来说技巧性的东西不应该太重。

4. 热衷新技术
古人讲究温故而知新还是很有道理的。学习新技术可以给自我镀金,欠缺基础的东西就会内力不足,这样在应用的过程中就会有问题。

5. 学到“二手货”
国内前端技术社区的分享质量总体还是不高。那些照搬国外,加上自己片面认识的资源就是“二手货”。这些资源在看的时候要慧眼识珠啊。最好还是直接看第一手资料。

6. 光看不用,坐等机会
很多同学表示正在看什么什么,或正准备学什么什么。但就是没动手写过,总是希望在实习公司有实践机会。这样的机会可能永远也没有呢,完善自我的技能,是需要自己给自己创造机会,写一些demo,搞一些个人项目,参加一些技术交流,持续关注该技术的发展……坐等只能浪费时间。

Comments

  1. zeming says:

    哈,我们的面试题也有这一道题。至今木有一个满意的答案。我个人的解决方案是,左侧元素float left,右侧元素只定义margin-left

  2. tcdona says:

    啊,这我也没想到,看来我学了太多的二手货了(而且早已不是应届生)T_T。。。

  3. fairzy says:

    呃,貌似我就是搜索学习式,那问一下如何不走搜索学习式道路呢?看书么?还是。。。

  4. bq69 says:

    在不让文字填充到图片下方时,个人感觉网易的方案挺好,:)

    • Kejun says:

      你需要实际试一下,文字不会到图片下方。

      • zhiyelee says:

        overflow本就有这个效果,防止环绕。
        去掉overflow文字就会到下边了~

        • kejun says:

          “防止环绕”不是overflow的功能,是overflow:hidden会触发bfc(IE6不会触发),触发了bfc的块元素的边缘不会和它相邻的float层重叠。可以有多种方式触发bfc,都会你所说的“防止环绕”的效果。“效果”是的表面的,“功能”是它自身特性,这个要在应用时区分清楚啊

      • pengju says:

        在IE下是否必须是标准模式下才正确?怪异模式下好像有问题

  5. N鱼 says:

    关键是要主动的思考和总结。而不是被动地验证google搜索的结果

  6. ksword says:

    请问使用你推荐的方法实现两个item区块div并排一行如何做?我试了一下,会混在一起



  7. Z.Mofei says:

    .item .content 加一个 word-break:break-all;吧这样才完美

  8. anonymous says:

    凭什么说是丑陋的?兼容性最好。

  9. Alex says:

    .item .content { overflow:hidden;zoom:1; } 你怎么不直接说用display: inline-block..

  10. 丸子 says:

    额,好文,受益匪浅,只是对BFC没啥具体化的概念

  11. lmore says:

    最外层的itemdiv,它的高度是contentdiv的高度。不需要处理吗?
    如果处理你会怎么处理?

  12. wbest says:

    呃····我在反思!

  13. 巴拉巴拉 says:

    淘宝的方法我觉得是最好的,你这个在ie6下鼠标中间按下的效果会失效,微博那个中规中矩的也没多大问题。

    • Kejun says:

      “鼠标中间按下的效果会失效”是什么意思?
      两个float的实现,还真不如table

      • C.King says:

        就是链接没有定义L-V-H-A的样式,ie6下不定义全时会有错误显示的现象产生。:)

      • 巴拉巴拉 says:

        用overflow,ie6鼠标滚轮按下的效果会失效;两个浮动我说是中规中矩,何况你题里也没说文字超出图片高度后会怎样,如果要环绕图片你的答案不就是错的;table不评价了,不过说明你太注重扩展性了

        • Kejun says:

          如果这道题要求改成内容环绕图片,那a,b,c都要大改,而正解只需微调css。灵活性、扩展性是html结构设计中最重要的啊。

  14. Zoom.Quiet says:

    总结的非常好,
    这些问题,甚至于不仅仅是学生有,长年在职场混的,也多少有几条常犯的…

  15. aisensiy says:

    首先,我很赞同作者的说法。

    在很多公司里面,其实没有非常周到的细致的培训过程。很多自己遇到的具体的问题,还是要靠自己解决。而为了完成任务自己解决就变成了搜索式学习,解决临时问题,而没有建立知识体系。

    自己要有主动性,学习从来都是自己的事情,什么时候都可以选择敷衍了事还是刨根问底。我目前也在一家国内比较不错的公司做前端相关的实习,充分意识到自己应该有这个主动性才行,而不是等着被人来教。而且我觉得,到那里都应该是这个道理吧。

    要精益求精,看到作者上面的一些已经实现的方案,很显然都不够所谓的优雅。很显然有进一步优化的空间,这种想法和意识很重要。

    我觉得有笔者这样想法的人难能可贵,让笔者带的人有福了。

  16. wuchang says:




    这样子的布局的时候还是padding挤出来好点,要不meta随时有机会在图片底下

  17. 强记 says:

    我会那个第三种方法,图片的宽度比较弹性,可惜不是应届生了

  18. 袁源 says:

    呵呵~可是标准答案不是很像表格布局么

  19. ghSky says:

    有些时候用几种手段都能实现同样的效果,但是确实少了对比、分析,这个是比较缺憾的地方,有待加强改进~可能正是由于这种小细节忽略了,最终导致无法走向顶峰~静下心来,认真、踏实学习一门知识,确实需要莫大的耐心和毅力,周围的浮躁太容易让自我放松,满足于现状~受教受教~

    其实说到大公司的实习,对于我个人来说,结论往往不是那样的~可能由于自己运气比较好,进入了比较好的公司,比较好的团队,身边周围有太多优秀的人,无形中逼迫自己静下心学了很多,那段时期,对自己的非常非常大,之前在学校遇到的瓶颈,在那儿仿佛突然消失,豁然开朗起来~但是面对太多需求,赶工神马的无可避免,自然就会走上那条捷径,可能往往在以后的过程中也就“习惯”了~

    说的有点儿多,总的说来就是要学会淡然,学会沉淀,牢靠的基础才能筑起摩天大楼~与大家共勉~

  20. s5s5 says:

    我喜欢网易的,深受float毒害多年,能不用float就不用它

    • kejun says:

      也不能一棍子打死,float要经济的用。就像重构时代,完全不用table就是好的吗,显然是不对的。

    • 裕波 says:

      我个人比较喜欢的观念是,当有浮动时,时刻记得清除浮动,这样其实不会受多少苦!

      • Kejun says:

        绝大多数浮动的bug都是组合使用引起的,所以如果要用浮动最好单独用

  21. fantasy-fan says:

    作为一个前端初学者(以前一直做后端开发),实际经验有限,但我的解决方案也是用float,毕竟是标准方法,如果能用浮动,我一般不用margin-left这样的方法。感觉float挺好用。

    不过实际中也发现一个经验,就是无论是想让img浮动到段落的左边还是右边,html中img都要放在段落前面。发现默认的文档流中,段落如果放在前面,宽度默认是容器宽度的100%,图片会掉到段落下面。而图片可能本身有默认宽高,不会有这个问题。

    以前这个问题,还试过父元素position relative,然后图片采用position absolute,结果在ie6和ie7下死的一塌糊涂,心中有阴影,还是用float更好。

  22. 九幽 says:

    需要自己给自己创造机会,写一些demo,搞一些个人项目,参加一些技术交流,持续关注该技术的发展……坐等只能浪费时间。
    ==========================
    赞这句话!谢谢提醒~我也要努力马上行动起来!

  23. seth says:

    3、4、5归结下来其实是一个问题:浮躁。因为浮躁,所以不重视基础,只想速成,只追新潮。包括2的一部分,也是因为不求甚解。6提到的那些同学其实心里都明白,只是没有胆量承认自己不会罢了。

  24. 元云 says:

    “前端开发岗位的需求这么大,但始终缺少专业人才的一个根本原因吧。”
    根本原因,还是国内工作模式的原因,环境的原因。
    能不能提供一个岗位,能够让其变为专业,更专业。

    多看了几遍你的总结,写的就是现在事实…..对应届毕业生,能语重心长的说,已经是恩赐了….该说的,还是对“教育”体系说吧…..

  25. Atry says:

    其实被你视为傻逼多无辜啊,别人也知道那方案不清爽啊,可是别人要照顾IE6。

    网页设计师每天必干三件事,吃饭、睡觉和骂IE6。

  26. hlily says:

    其实我是应届生,想问能否去面试,应聘前端。自荐一下。

  27. ray says:

    嗯,学到了,对于css还是要学好基础的知识。

  28. 小Q says:

    题目中没有给出要求的像素什么的,显然最后那个是会好一些

  29. 怪兽 says:

    你提到的方法用来是自适应不错,但只能说是做自适应的一个解决方案,不要把其他人的方法打死嘛~
    如果.content里面的.title要放到文字标题下面,你的结构其实还是很折腾的。

  30. konakona says:

    1.尽量少用CSS HACK。
    2.如果你是个美工or设计师什么的,尽量不要用table,无论是多小的站,无论哪种都有辱自己的名号。
    3.对自己的布局要有足够的了解,不要泛用class,注意重用性和结构性。
    举例:如果这个img里有
    .imgText-temp-1 只有一个img,就尽量用img 而不是再弄一个class。

  31. Ryan says:

    关于第1条并不赞同,一直认为,学习要靠的是个人,公司对个人的技术成长的帮助其实并没有这么大,特别是只是在实习阶段。相反,如果实习生能更早的接触现实工作的流程,这样对他们对工作的认识会更有收获。

    • Kejun says:

      公司/团队是个人成长的环境,很少有人能在不专业的环境中成长的很专业。外面的技术不能直接应用于公司产品,要通过合理架构。团队对技术错误的应用会真接影响到个人、个人的认知。没错,学习主要靠个人,公司/团队要提供给个人要学习的东西,提供给个人发挥的空间,而不是随便学外面的东西。

  32. windylcx says:

    0.技术是为应用场服务的,理解技术的原理能更好地将其应用到某一应用场景。1.既然最终的目的是解决问题,为应用服务。解决方案本身的优劣只能通过解决问题的效果来衡量。

    • Kejun says:

      同样是解决问题,灵活、可复用的方案不仅提高可维护性,也提高了今后开发的效率,这才是衡量优劣的标准。解决问题是最低要求。

  33. Evan says:

    受教~希望Blog可以开RRS~~

  34. riasky says:

    不错,克军的分析很透彻。这回复可真多啊!

  35. ice says:

    我也应届毕业生…
    很多时候都是自己靠搜索解决的
    我一般都采取C方案,自己最熟悉,一旦会引起其他啥兼容性的问题自己也能很快的搞定,如果有时间的话也会更注重它的扩展性,页面设计出来留给做页面的那同学真的不多,有时设计的可能还会改动,有时开发的会催,很多时候都只能快速的去实现它而已。。。

  36. Demon says:

    我是属于死看书,死啃基础的那种。至于网上搜,很少啦,基本没看上的。这个题的答案,个人觉得没什么所谓正解啦,不过有些确实很不怎么的。撤……

  37. Demon says:

    补充下,做技术,YY能力一定要强。嘿嘿……

  38. 离谱 says:

    我遇到的很多技术人员,概念性的基础知识很差,但实践能力比较强。东西是做的出来,但比较丑陋,他们不会想的是领导不在意,自己会在意吗?兴趣学习和生存学习,早就二段不同的代码。但懂的人欣赏它的美,懂却不实践实施的人,那就是假把式了。所以你的代码优雅取决于你的价值观了。

    • Kejun says:

      这不是美不美的啊,这关系到代码的可维护性、代码复用之类的事。我就不明白,这样是简化开发啊,为什么会觉得这么写会更费时间。大家都是出来混饭吃的,也得混的专业一点吧,不然怎么混的长。

  39. 天边鱼 says:

    - -

    估计还是经验问题吧…
    我写这种结构的时候一般都是


    这么写

    不是说有技巧.. 而是看着舒服.. 以后改着也舒服

  40. 三水清 says:

    像这些知识点书上是看不到的,看书一些概念总是模糊,应该是在不断的实践中得到的吧

  41. 袁源 says:

    克军据说您的标准答案在 ie6 下有几像素的 bug

  42. joel says:

    推荐想面试的同学认真的把CSS Mastery second edition认真的看完,然后迅速的通读tjkdesign,再面试吧.

  43. isnowfy says:

    赞阿,今天讲的也很赞!

  44. 亚丁 says:

    有克军这样的布道者,前端还是有希望的,这些都是工作中经常遇到的场景,虽然小,但是足以看出大家的功力。
    另:克军,你的文章内容行高貌似有点小,看着累~

  45. 啄米鸟 says:

    克军和我想到一起去了,呵呵,其实我在09年就觉得这个图文混排的问题,很多童鞋觉得这个很简单,其实不然,我也拿这个题目做过面试题,至少到现在也没人写出正确答案。
    http://blog.dmtuan.com/?p=282

  46. yun77op says:

    如果面试者知道css3的flex box那就更好了

  47. 裕波 says:

    第二道题好像没有看到克军最后公布答案。
    但是关于最佳答案的问题,我觉得是每一个人对结构的理解不同,故而最终结果也会不同,如果克军能够将你的答案公布出来,这样应该可以产生一系列的探讨。

  48. 裕波 says:

    不好意思,我又认真看了一下,看到有正解,哈!
    抱歉!

  49. hej says:

    zoom:1; 为什么要用这个呢?我没用也可以啊。

  50. 苏昊 says:

    IE6下 .item .pic{float:left;margin-right:10px;_margin-right:7px;}需要加一句hack,个人十分推荐这种做法,也有使用过。
    你的display:inline-block布局(使用letter-spacing,word-spacing消除换行引起的边距)也有做过研究,项目中一般不会遇到,但却解决不等高布局排列的问题

  51. 7rice says:

    如果图片宽度知道的话,用
    .item .pic { float:left;width:200px}
    .item .content {padding-left:200px;} 也可以实现

  52. wyysf says:

    左侧的图片若是固定宽度,其实这样也挺好

    .item .pic { float:left; }
    .item .content { margin-left:160px; }/*假如图片的宽度是150*/
    这样就是若是图片文字环绕,只需要把margin-left去掉

  53. Chika says:

    可具体谈一下前端如何正确有效的入门么?

  54. Gino_wang says:

    克军,你好,我对BFC的概念很困惑,也看了关于BFC的两篇文章,但还是没看明白,我想问关于BFC您还有推荐的文章或书籍吗?
    或者能有幸看到您写的关于BFC的介绍文章

    这两篇文章是:
    http://jeehon.info/log/2011/11/11/block-formatting-contexts%E5%9D%97%E7%BA%A7%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%B8%8A%E4%B8%8B%E6%96%87/
    http://topic.csdn.net/u/20100802/18/400e449a-edc5-4593-9db7-be050d527237.html?031234066046151554

  55. Hame Tan says:

    我个人不太喜欢用margin,更喜欢用padding,因为float加上margin在IE6里的2像素很让人纠结。
    这道题如果是我,写法如下,仅供探讨


    *{overflow:hidden;}
    .item .pic { float:left;}
    .item .content { padding-left:10px}

    当然我这里的overflow放在*里是为了兼容火狐的自适应高,加背景而用的。在有的不需要overflow的地方再进行调整就是了。

  56. 貂皮大衣 says:

    对! 很赞同 搜索式教学害人不浅这句话

  57. 老鹰主机 says:

    通过面试就好,其实工作并没有面试这么难

  58. fshuizhe says:

    怎么说呢?我会将这便文章保存,然后每天看一遍。

  59. meteoric_cry says:

    坑固然很多,但很多坑其实是可以被避免的。结构如同一座大厦的骨架,结构写的好,自然可以避免很多不必要的bug,对于一个新人来讲,我觉得解决问题的思路、观念相比技巧而言更为重要,毕竟技巧更多在于积累。地基和骨架搭的是否牢靠,楼层建高了、时间长了自然就能看出来了,而一套好的规范能帮助开发人员规避很多问题。

    优秀的编码和结构,无论从外观、适用性以及后期维护来看都远高于普通一筹,可是很多人却不愿意去认可和欣赏别人的优秀,不经常地自我总结和学习,再多的技巧对于新人来讲也无太多意义。

  60. dayu says:

    初学前端,我现在能做好的也就网页制作,js自己学着,越学越怕。 以上的6点半年工作时间都有经历过。所以看到了这篇还是挺感动,还是老老实实的回到基础慢慢学。

  61. 木游离 says:

    这个方案的兼容性不好
    1.右边设置overflow:hidden.
    如果右侧是一个表格,表格有很多字段,而且设置不换行的话,超出浏览器的范围会被隐藏。
    2.右边设置table-cell.
    那么右侧都不是充满整个屏幕的,假如我的右边有一个背景颜色而内容只有几个字的话,这时候背景色只能占据这几个字的宽度。

  62. alanerzhao says:

    无聊的时候,看看克军“老师”的文章,总是很激情啊,深有感触,什么问题都分析的那么详细。

  1. [...]   注:本文转载自Kejun的博客 [...]

  2. [...] Kejun’s Blog : 近期面试感受 [...]

  3. [...] 前几天看到kejun‘s blog里面的一篇文章:“近期面试感受”,里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatting Contexts(块级格式化上下文),而我一点印象都没有,所以就找了一些相关的文章学习一下,看到一篇很好的文章,所以就翻译出来和大家共享一下。原文是:Block Formatting Contexts [...]

  4. [...] kejun老师写了一篇博文《近期面试感受》,大概回答了这个问题,我很感谢kejun前辈重视曾经面试过的求职者,特别整理了一下我们的职业规划误区,以儆效尤。不得不说老前辈看人很准,kejun老师曾问我:“为何不考虑往设计师方向发展?”,这也是一直横在我面前的一道坎。 [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">