這兩天大概面了5、6位應屆的同學，最後往往忍不住聊的多了些，有點開復老師的感覺了。歸納下來有幾個突出的問題。
1. 在公司實習學不到技術，學到的只是做事的方式
這些做事的方式（或者說技巧）有些是必要的，比如溝通方面。但更多是沒有價值的，比如大公司繁瑣的流程，各種毫無道理的開發規範，拖沓的做事風格等等。對於技術人員來說技巧性的東西千萬不能太重。一個技術團隊如果讓實習生學不到專業上的東西，可以質疑其專業性了。應屆生在學校，在公司如果都接觸不到最專業的技術，那麼他們又怎麼能成長起來呢。一個惡性循環的開始。前端開發崗位的需求這麼大，但始終缺少專業人才的一個根本原因吧。
2. 用的不是技術，更多是技巧
由於在學校裏沒有系統的前端開發課程，導致對html/css/javascript基本概念的理解非常薄弱。大部分人的學習方式是：先看書，然後覺得書和實踐離得很遠就直接實踐，遇到問題就去網上搜，而搜到的基本都是“技巧”性的東西。或者是跟着學校裏的“牛人”學，摻着各種好的、壞的經驗全盤接受。比如實現一個左圖右內容的顯示效果，寫出html和css（見下圖）。這是我的一道筆試題，看起來很簡單吧。但是還沒有人答出最佳答案。如果去網上看，國內那些大網站們是怎麼實現的，就不能怪他們了。
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，搞一些個人項目，參加一些技術交流，持續關注該技術的發展……坐等只能浪費時間。
Filed under: 想法
Previous post: D2技術嘉年華分享：前端基礎架構的實踐和思考
Comments
哈，我們的面試題也有這一道題。至今木有一個滿意的答案。我個人的解決方案是，左側元素float left，右側元素只定義margin-left
啊，這我也沒想到，看來我學了太多的二手貨了（而且早已不是應屆生）T_T。。。
呃，貌似我就是搜索學習式，那問一下如何不走搜索學習式道路呢？看書麼？還是。。。
在不讓文字填充到圖片下方時，個人感覺網易的方案挺好，：)
你需要實際試一下，文字不會到圖片下方。
overflow本就有這個效果，防止環繞。
去掉overflow文字就會到下邊了~
“防止環繞”不是overflow的功能，是overflow:hidden會觸發bfc（IE6不會觸發），觸發了bfc的塊元素的邊緣不會和它相鄰的float層重疊。可以有多種方式觸發bfc，都會你所說的“防止環繞”的效果。“效果”是的表面的，“功能”是它自身特性，這個要在應用時區分清楚啊
關鍵是要主動的思考和總結。而不是被動地驗證google搜索的結果
請問使用你推薦的方法實現兩個item區塊div並排一行如何做？我試了一下，會混在一起
…
…
…
…
你要的是這種效果嗎： http://hikejun.com/demo/css/demo_list.html
.item .content 加一個 word-break:break-all;吧這樣才完美
憑什麼說是醜陋的？兼容性最好。
我的方案兼容性也不差啊
.item .content { overflow:hidden;zoom:1; } 你怎麼不直接說用display: inline-block..
目的是觸發block formatting context，用什麼都可以啊。
額，好文，受益匪淺，只是對BFC沒啥具體化的概念
最外層的itemdiv,它的高度是contentdiv的高度。不需要處理嗎？
如果處理你會怎麼處理？
簡單的話就.item { overflow:hidden; }
呃····我在反思！
淘寶的方法我覺得是最好的，你這個在ie6下鼠標中間按下的效果會失效，微博那個中規中矩的也沒多大問題。
“鼠標中間按下的效果會失效”是什麼意思？
兩個float的實現，還真不如table
就是鏈接沒有定義L-V-H-A的樣式，ie6下不定義全時會有錯誤顯示的現象產生。:)
用overflow，ie6鼠標滾輪按下的效果會失效；兩個浮動我說是中規中矩，何況你題裏也沒說文字超出圖片高度後會怎樣，如果要環繞圖片你的答案不就是錯的；table不評價了，不過說明你太注重擴展性了
如果這道題要求改成內容環繞圖片，那a，b，c都要大改，而正解只需微調css。靈活性、擴展性是html結構設計中最重要的啊。
總結的非常好,
這些問題,甚至於不僅僅是學生有,長年在職場混的,也多少有幾條常犯的…
首先，我很贊同作者的說法。
在很多公司裏面，其實沒有非常周到的細緻的培訓過程。很多自己遇到的具體的問題，還是要靠自己解決。而爲了完成任務自己解決就變成了搜索式學習，解決臨時問題，而沒有建立知識體系。
自己要有主動性，學習從來都是自己的事情，什麼時候都可以選擇敷衍了事還是刨根問底。我目前也在一家國內比較不錯的公司做前端相關的實習，充分意識到自己應該有這個主動性才行，而不是等着被人來教。而且我覺得，到那裏都應該是這個道理吧。
要精益求精，看到作者上面的一些已經實現的方案，很顯然都不夠所謂的優雅。很顯然有進一步優化的空間，這種想法和意識很重要。
我覺得有筆者這樣想法的人難能可貴，讓筆者帶的人有福了。
這本書很基礎 http://www.csszengarden.com
…
…
…
…
這樣子的佈局的時候還是padding擠出來好點，要不meta隨時有機會在圖片底下
不會啊，可以試試啊
我會那個第三種方法，圖片的寬度比較彈性，可惜不是應屆生了
呵呵～可是標準答案不是很像表格佈局麼
有些時候用幾種手段都能實現同樣的效果，但是確實少了對比、分析，這個是比較缺憾的地方，有待加強改進～可能正是由於這種小細節忽略了，最終導致無法走向頂峯～靜下心來，認真、踏實學習一門知識，確實需要莫大的耐心和毅力，周圍的浮躁太容易讓自我放鬆，滿足於現狀～受教受教～
其實說到大公司的實習，對於我個人來說，結論往往不是那樣的～可能由於自己運氣比較好，進入了比較好的公司，比較好的團隊，身邊周圍有太多優秀的人，無形中逼迫自己靜下心學了很多，那段時期，對自己的非常非常大，之前在學校遇到的瓶頸，在那兒彷彿突然消失，豁然開朗起來～但是面對太多需求，趕工神馬的無可避免，自然就會走上那條捷徑，可能往往在以後的過程中也就“習慣”了～
說的有點兒多，總的說來就是要學會淡然，學會沉澱，牢靠的基礎才能築起摩天大樓～與大家共勉～
我喜歡網易的，深受float毒害多年，能不用float就不用它
也不能一棍子打死，float要經濟的用。就像重構時代，完全不用table就是好的嗎，顯然是不對的。
作爲一個前端初學者（以前一直做後端開發），實際經驗有限，但我的解決方案也是用float，畢竟是標準方法，如果能用浮動，我一般不用margin-left這樣的方法。感覺float挺好用。
不過實際中也發現一個經驗，就是無論是想讓img浮動到段落的左邊還是右邊，html中img都要放在段落前面。發現默認的文檔流中，段落如果放在前面，寬度默認是容器寬度的100%，圖片會掉到段落下面。而圖片可能本身有默認寬高，不會有這個問題。
以前這個問題，還試過父元素position relative，然後圖片採用position absolute，結果在ie6和ie7下死的一塌糊塗，心中有陰影，還是用float更好。
需要自己給自己創造機會，寫一些demo，搞一些個人項目，參加一些技術交流，持續關注該技術的發展……坐等只能浪費時間。
==========================
贊這句話！謝謝提醒~我也要努力馬上行動起來！
3、4、5歸結下來其實是一個問題：浮躁。因爲浮躁，所以不重視基礎，只想速成，只追新潮。包括2的一部分，也是因爲不求甚解。6提到的那些同學其實心裏都明白，只是沒有膽量承認自己不會罷了。
哈哈，YY的評論最好： http://shuo.douban.com/#!/Dexter_Yy/status/784562227