本文轉貼自PTT
台灣最大的本土社群網站
分享這篇文章到Facebook、Google+或噗浪！


 作者  evenwu (EvenWu)                                       看板  Web_Design 
 標題  [心得] 給網頁設計師的建議                                              
 時間  Sun Dec 23 18:31:39 2012                                               
───────────────────────────────────────

原文
http://blog.evendesign.tw/post/38567423298/web-designer

轉錄

前陣子因為案件的需要，面試了約 20 位熟悉 CSS 的網頁設計師。為了提高面試效率，

特地設計了一份 CSS 考題來進行篩選，考題雖命名為「煉獄CSS」但事實上非常初階，

我認為都是一些必須知道的事情。


由於面試過程是一對一，所以不會有互相影響的狀況。面試者來信履歷都極有自信，

幾乎都強調通曉 HTML/CSS 設計，經驗豐富，希望能盡力接下案件。但透過面試，

發現有九成面試者不但無法答題，且錯誤答案竟然也雷同，讓我覺得一定要特地記錄

下來。


首先來看看考題，總共十題，但多數人三題錯，就請回了。所以我只寫出這三題。

考題在現場有實際的 example 頁面、面試者可以自由開啟 Inspector 或是

上網 google。（也就是有上機啦...）

===

第一題、不同瀏覽器的預設樣式不同，要怎麼解決？

正確答案：reset.css 或是 normalize.css，如果有使用過 css framework

也多半是先行採用了這兩個重設 CSS 的方式。

原先設計這一題的用意是熱身，沒想到在這邊就攔下了九成的網頁設計師… 多數人回答

不出預設樣式不同要怎麼辦，而是回答「針對不同的瀏覽器寫 css hack」有經驗的

設計師就會知道，這是非常糟糕的答案。


第二題、如果一個X元素內的子元素通通 float: left 請問元素本身會有

什麼狀況？如果我要在X元素內下背景，卻沒有顯示，請問如何解決？

正確答案：X元素本身會沒有高度，必須實作 clear-fix (self-clear) 或是在內部

塞任一新元素並設置 clear: both X元素才能包覆子元素

這一題也是很基礎的題目，如果回答不出來，可能連二欄式的版面都無法完成。

但仍然有高達九成的人回答：「將X元素本身設置 height 就可以解決」這是一個恐怖的

答案，很有可能在上線的時候就立刻破版。


第三題、為何 a 元素的寬度設置了 width: 150px 但是寬卻沒有 150px 呢？

正確答案：將 a 元素設定 display: block 或是 display: inline-block

我記得這一題也只有三個人答對，實在太令人驚訝了。這都是非常簡易的問題，絕非煉獄

等級的考題。大部分的人要求 google 此問題。或是在 inspector 進行「試誤法」，

某些人誤打誤撞找對了答案，但明顯不是真的知道解答。

===

雖然僅面試了 20 個網頁設計師，不代表全部的現況，但這些錯誤答案的普遍性，

確實存在，令人不安。希望能夠寫出問題，整理後建議如下：


建立資訊流觀念

很多人認為網頁只是網路上的平面，但網頁不是一張在瀏覽器的畫布。

網頁是一個排版系統，是資訊流。CSS 不只是制定位置、寬高，而是來制定排版規則。

要注意「寬高」是不定的這件事，也是一個基本觀念。熟悉 HTML/CSS 排版的設計師，

了解這點應該是基本功了。你看到的高不是高，而是讓內容多寡來決定外面的元素多高。


先打好基本功，再追求新規格

有不少面試者熟悉 CSS3 的新規格，幾乎都知道 border-radius、box-shadow… 等，

卻無法分辨 block 與 inline 的差異，也不知道哪些元素預設就是 inline，

有點像是小學沒念，直接跳級到高中的感覺。


這是因為網路範例的氾濫造成的，當你使用了別人的範例，基本功自然就不太需要，

錦上添花即可，非常速成，再去找些刺激、裝飾性的 CSS3 … 但一個  元素該如何

讓他有寬度，需要下 display: block 改變原本 inline 的類型，就考驗了你是否原本

就知道  預設是 inline 的一員。這些知識僅需耐心的買一本 CSS 書籍，

從頭讀起即可。


保持追根究柢的精神

我設計的這些問題，絕對是在進行每個案件都會遇到，而專業者應該是熟能生巧、

腦筋就內建解決方式，不用進行查詢或試誤。來面試的設計師，也都做過不少作品，

必定遇過這些問題，也曾解決過。但解決後沒有去理解為什麼，

缺乏理解的後果就是：每次遇到問題都要重新查詢、對於新產生的問題也完全

沒有頭緒。


所以當你遇到問題的時候，去問人、google 是很好的，但不要光拿著答案回來

copy / paste 上去，看到問題解決就算了，務必要保持「為什麼會發生、

為什麼可以解決」的思考，去追問給你答案的人，或是仔細看看解題文章。事後

多多實驗，重現問題，也能重新解決。


如果你追根究柢，其實也有可能因此多知道更多 CSS 的相關常識，甚至研究出比別人

給你的還更好的解決方法。



--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.34.100.58
推 LaPass:我也不會 QQ                                              12/23 18:40
→ LaPass:reset.css到底之前在板上看過，但沒用過                    12/23 18:40
→ tyf99:你的第三題，說實在的，光題目我看不懂你要問什麼            12/23 18:43
抱歉啦，因為實際答題時是有上機的，光看敘述如果對相關名詞不是很懂
確實會看不懂

推 LaPass:是說..... 即使是現在，很多人都還在用table排版的.....     12/23 18:44
→ LaPass:尤其是已經寫了五年、八年的系統..... 這種現象還蠻嚴重的   12/23 18:45
→ LaPass:或是.... 用了一堆frameset來排版之類的                    12/23 18:46
→ LaPass:這種寫法對SEO很不友善，但是我看到的那個ERP、EIR系統就這  12/23 18:47
→ LaPass:樣幹 orz.....                                            12/23 18:47
推 s25g5d4:ERP會需要SEO嗎                                          12/23 18:56
推 LaPass:不需要，所以..... 主管就繼續這樣用，即使對外網站也是這   12/23 19:14
→ LaPass:樣搞。看見搜尋引擎排的很後面，就想花錢去做排名....       12/23 19:15
封閉系統當然沒什麼SEO的問題，只是說架構不好，未來也很難維護或擴增

推 e1q3z9c7:我是初學者 大致上都看得懂欸＠＠                        12/23 19:23
所以說你有基本功，但是看的懂跟突然被問，可能不太一樣

推 silver00:後面的建議 資訊類的工作都很受用                        12/23 19:28
推 faerie0218: 我也覺得如果你開的這些題目不會，蠻誇張的...只是，   12/23 21:04
→ faerie0218:我的小建議是，題目要再清楚明瞭一點，我2.3題是看你的  12/23 21:05
→ faerie0218:說明才知道，你的問題是什麼XDD 目前身為前端工程師     12/23 21:06
→ faerie0218:的一點小建議，因為我是本來都做設計，其實我發現有時   12/23 21:06
→ faerie0218:程式跟設計人員在表達跟溝通模式還是差很多XDD          12/23 21:07
→ faerie0218:To LA大:不只TABLE，還有一種流派是用CSS樣式中的       12/23 21:13
→ faerie0218:dispaly:table-cell排版，之前幫人改到過，很想砸電腦   12/23 21:16
→ TonyQ:我是覺得這些題目不適合用紙本考，但面試透過引導應該是      12/23 22:45
→ TonyQ:不錯的考題。                                              12/23 22:45
回答以上大大的疑問，當場不是紙本考題阿！我上面有寫是上機阿 :)

推 EROS4:說這些不會的前端設計師該好好專精不要接超過本分的案子了    12/23 23:01
→ EROS4:inline跟block element是我在教學生html跟css最基本的基本    12/23 23:02
→ EROS4:基本弄不清楚只會一直重複寫一堆覆蓋樣式 不該把時間花在這   12/23 23:03
→ EROS4種事情上 SEO效果應該只是從中可以獲得的其中一個小效益而已   12/23 23:04

推 Ken52039:我必須說 當天不是考文字 是考實作 even大大會給你範例    12/23 23:04
→ Ken52039:然後問你為何會這樣 請問該如何解決                      12/23 23:04
→ Ken52039:並非考考試卷好嗎 只是blog只能以文字呈現                12/23 23:04
→ Ken52039:even大大應該把考題分享出來讓板友嚐嚐 XDDDDD            12/23 23:05

推 nochingyo:很棒的分享!                                           12/23 23:24
→ nochingyo:elq3z9c7版友，你是初學者大致上都看得懂...             12/23 23:25
→ nochingyo:所以意思是你知道有那一些元素的預設是inline-block嗎囧  12/23 23:25

推 ToMobaby:我覺的這些東西要測一個人適不適合 很自high...           12/23 23:46
這邊是要找即戰力，不是適合的人啦... 供您參考

推 LaPass:<= 主要是後端，不過公司做起來沒人在管前端或後端的....    12/24 00:09

→ superpai:第三題 a元素的意思是吧 這樣應該夠清楚不需要說明了   12/24 00:12
元素 = element 我想應該很清楚了？但其實上機的時候看的就是原始碼 :)
→ superpai:用dispaly:table-cell排版不是錯的 不太流行而已          12/24 00:14
若能回答這種當然也給對...

推 LaPass:而且老實說..... 我都在用公司的框架，真的會搞到完全不用   12/24 00:14
→ LaPass:html css就把版面排好。還有微軟的mvc也有可能會這樣....    12/24 00:14
你不是我要找的目標呀，我要的是 html/css 設計師
來的人也自稱是，才會有所要求的 :)

我平常也在用框架∼確實都不用，但萬一遇到問題時就很考驗了
※ 編輯: evenwu          來自: 114.34.100.58        (12/24 00:18)
→ superpai:建議把X元素改成div元素XD 順著看下來會一時轉不過來      12/24 00:18
→ evenwu:幹嘛那麼在意看不懂考題啦，當場是上機啊XDDDD              12/24 00:19
→ evenwu:何況實際不是div...                                       12/24 00:20
→ superpai:就文章看下來一時以為a也像上題X一樣是不確定的代詞       12/24 00:22
→ superpai:小改一下就沒這個問題了..吧                             12/24 00:22
→ Ken52039:主要真的是上機考 有考過就不會一直抓著文意打            12/24 00:33
→ evenwu:其實也有道理... 文章改一改好了                           12/24 00:37
→ faerie0218:to superpai大:也不是說他是錯的，可能因為那時候，改   12/24 00:58
→ faerie0218:動的內容，必須有一些地方要動態呈現，所以我在寫JQ     12/24 00:59
→ faerie0218:加修改，就弄得很惱火，原來的人搞不定來兩天就離職XDD  12/24 01:00
→ faerie0218:to 原PO: 原來是上機，那我搞錯了 SORRY~XDDD           12/24 01:01
→ superpai:是外包 還是同事？                                      12/24 01:03
→ faerie0218:其實除了BLOCK也可以考考， margin跟padding，應該也是  12/24 01:04
→ faerie0218:不錯的題目XDD 上下兩個元素設了同MARGIN在某些情況下   12/24 01:05
→ faerie0218:只會吃到一個XDDD                                     12/24 01:05
→ faerie0218:to super大:以前應徵某公司，進去才知道我前一個只待2   12/24 01:06
→ faerie0218:天XDD  所以算是"前同事"吧...雖然沒共事過，但是我算   12/24 01:07
→ faerie0218:是幫他收尾XDD                                        12/24 01:07
→ superpai:oh 收尾就無解了...                                     12/24 01:08
→ faerie0218:哈哈~沒差啦，反正公司付我錢不就是要幫他處理XD?最後   12/24 01:10
→ faerie0218:我還是砍掉重練，重排了XDDD                           12/24 01:10
推 sjlxup6:太好了這三題我會！！！                                  12/24 04:00
推 mrbigmouth:我也覺得問題本讓會讓人答錯....                       12/24 09:24
→ mrbigmouth:第一二題的答案我都知道  也都在使用                   12/24 09:25
→ mrbigmouth:但實際答我應該也會答錯                               12/24 09:25
推 JYHuang:這三題用字面說不一定會，但是上機的話我八成都知道問題    12/24 09:25
→ JYHuang:在那.. but 我是寫後端+前端的 XD                         12/24 09:26
→ mrbigmouth:通常看到第一題  會直覺想到那些令人痛苦的ie6 margin   12/24 09:26
→ mrbigmouth:等瀏覽器問題....                                     12/24 09:27
→ mrbigmouth:針對各瀏覽器用hack比用reset.css要難要複雜很多        12/24 09:28
→ mrbigmouth:有經驗的前端設計師應該都為此少掉一堆頭髮....所以自   12/24 09:28
→ mrbigmouth:然會直覺回答這得寫hack....                           12/24 09:28
推 JYHuang:不過第一題從字面看的確會引導人去想到css hack            12/24 09:29
→ mrbigmouth:而reset css是很容易忽略的基本....雖然有用但會忽略    12/24 09:29
→ JYHuang:我在用reset.css主要是為了把瀏覽器預設的效果清掉         12/24 09:29
→ superpai:css hack是解bug而不是「預設樣式」 會直覺回答寫hack     12/24 09:30
→ superpai:的話觀念不夠清楚                                       12/24 09:30
→ mrbigmouth:第二題也是差不多道理  除了float會遇到這種狀況 在某   12/24 09:30
→ JYHuang:並不清楚各家會有不同的初始設定                          12/24 09:30
→ mrbigmouth:些情況可能會用一個relative block內放全部absolute的   12/24 09:30
→ mrbigmouth:元素定位，這種情況要顯示relative block的背景就得設   12/24 09:31
→ mrbigmouth:hight                                                12/24 09:31
→ mrbigmouth:設hight可以同時解決float跟absolute父元素無背景的問   12/24 09:31
→ mrbigmouth:題，所以答題時自然會回答設height                     12/24 09:31
→ mrbigmouth:雖然實際上用時...遇到float還是設clear....            12/24 09:32
推 JYHuang:會習慣加clear，主要是要避免文繞圖那種情形               12/24 09:33
推 mrbigmouth:對  "習慣"                                           12/24 09:35
→ mrbigmouth:遇到float下面加clear  網站建置一開始就reset css      12/24 09:35
→ mrbigmouth:這都是習慣   但不會去注意記憶  答題時很難想到拿出來  12/24 09:35
→ mrbigmouth:設height跟hack這種解法問題很大 但正因為問題大才會記  12/24 09:36
→ mrbigmouth:憶深                                                 12/24 09:36
→ mrbigmouth:而且只要考慮到兼容ie6的問題  設height跟hack依然是不  12/24 09:37
→ mrbigmouth:可避免的解法之一  所以拿出來答題是很自然的           12/24 09:37
→ superpai:clear float ie6也支援啊 你在考慮什麼..?                12/24 09:43
→ superpai:如果沒有習慣加height是順位最後的答案被篩調也是剛好     12/24 09:45
推 LaPass:有機會我也想往前端深入說....                             12/24 09:47
→ twsphere:第一題就刷下了 /  \ 還好我是寫後端的                   12/24 10:52
推 aceone:原來這麼多人不會用reset...那寫起來不是超麻煩 囧          12/24 11:15
推 kaiyuegg:延伸 當 reset.css 遇到 jquery 套件的時候 怎麼處理?     12/24 11:21
→ musie:現在很多人都直接套bootstrap grid 取代reset norm css       12/24 11:49
→ musie:打錯Scaffolding                                           12/24 11:50
推 EROS4:reset.css比其它樣式都早下，碰到jquery套件會有啥問題囧     12/24 12:01
→ EROS4:clearfix用設height就可以解決的話根本就白考這題了..        12/24 12:03
→ oj113068:我也很驚訝這麼多人不會用reset，reset解決了90%相容問題  12/24 13:19
→ oj113068:其實也不是清掉預設，而是重置成統一的。                 12/24 13:21
推 LaPass:樓上，在業界逛一圈會發現更多更奇妙的東西的.....          12/24 14:14
推 EROS4:剛剛客戶找的後端工程師把我寫在body底部的js都搬進head了    12/24 16:04
推 JYHuang:..樓上,就讓他De到起肖吧(壞心 XD                         12/24 17:08
→ asamoon2008:不會用reset.css？不可能吧？都是只要IE能看就好嗎？   12/25 01:04
推 LaPass:不..... 是使用一般的寫法寫到各種瀏覽器都可以看.....      12/25 08:19
推 Isacat:推樓上用一般寫法 不過我想先加個reset.css算多一層保障啦   12/25 09:08
→ LaPass:當我看到，一個系統下有三四十個模組，每個模組下有二三十   12/25 09:50
→ LaPass:頁的JSP，每頁JSP可以多到一兩千，甚至五六千行的時候       12/25 09:51
→ LaPass:我都不知道該誇獎那些用笨方法搞出很龐大的系統，很努力     12/25 09:51
→ LaPass:                                             ^的人       12/25 09:52
→ LaPass:或是該指責，他不知道該用聰明的方法去寫程式.....          12/25 09:53
→ LaPass:這不管前後端都一樣.... = =                               12/25 09:53
推 XD9527:求職者亂槍打鳥的情況嚴重+1                               12/25 10:12
→ XD9527:但真的有一定標準的人 也不會在人力銀行裡出現太久的...     12/25 10:12
→ XD9527:            水準                                         12/25 10:13
→ XD9527:在人力銀行出現超過一段時間的 大都是被刷下來的...         12/25 10:13
推 kyork:to kaiyuegg 你應該是要問reset.css遇上WYSIWYG怎麼處理吧    12/25 10:43
推 kaiyuegg:有很多套件都會有些靠系統預設 可能原本沒reset前 沒問題  12/25 11:12
→ kaiyuegg:但是有些reset過後畫面很容易跑掉~例如日曆那些~!         12/25 11:13
→ kaiyuegg:主要是因為有些元素是用預設的 但是沒之後再定義過~       12/25 11:13
→ kaiyuegg:但是透過RESET就會重新定義了~就跟預設不同 很多套件都會  12/25 11:14
→ kaiyuegg:跑掉阿@@ 沒人遇過嗎? 樓上也有說 WYSIWYG 也會跑掉~!     12/25 11:14
→ kaiyuegg:上面的文法怪怪的XD 結論就是 Reset有些會改到系統預設值  12/25 11:16
→ kaiyuegg:但是很多套件沒有假設你的RESET情況 而是按照原本預設     12/25 11:16
→ kaiyuegg:所以很多JQUERY會跑掉~例如 float margin padding 之類的  12/25 11:17
→ kaiyuegg:             套件裡的CSS                               12/25 11:38
推 EROS4:那你該學習用normalize.css 而且float不會是預設             12/25 12:10
→ EROS4:那種會跑掉的你不reset一樣會在別的瀏覽器跑掉               12/25 12:11
→ oj113068:遇過啊 網前搜尋FCK edit (菸)                           12/25 12:42
→ oj113068:都會reset了，JQUERY跑掉這種事情 用開發者工具找一下原   12/25 12:43
→ oj113068:因就好了。我個人是覺得不用為此放棄reset...             12/25 12:44
推 kaiyuegg:我只是發延伸問題給大家而已~沒有說要放棄reset.css喔！   12/25 12:53
→ oj113068:欸 我不是那個意思XD                                    12/25 13:02
推 Ken52039:最基本的是要搞懂各種屬性在瀏覽器的預設 自己reset掉     12/25 13:11
→ TonyQ:我的意思是說這些題目不適合放給他自己一個人寫，            12/25 13:47
→ TonyQ:如果是透過問答的方式進行口試是很不錯的題目。XD            12/25 13:48
→ TonyQ:另外我看原文是知道不是紙本，只是我怕有笨蛋拿去做紙本考題  12/25 13:51
→ TonyQ:所以特別回那兩句而已，純用這個文字敘述很容易誤會題意的。  12/25 13:51
推 Luos:第一題那是什麼？                                           12/25 16:26
推 Luos:第二題確實clear是正確達案 不過我覺的inline-display 比較好  12/25 16:27
→ Luos:第三題就是inline-block了                                   12/25 16:28
推 fanntone:大部分公司都是拼產量的 品質先放旁邊~                   12/25 21:04
→ fanntone:之其然而不知其所以然 反正套一套可以賣就好              12/25 21:05
推 kurtisgod:同意TonyQ 這三個題目方向性是對的 但換一種方式會比較   12/25 23:10
→ kurtisgod:清楚                                                  12/25 23:10
推 FantasyRyu:鉅作                                                 12/25 23:20
推 tomin:老實說我也看不太懂  看了答案才知道問題在問什麼            12/26 01:07
→ tomin:不過都是好問題  如果能搭配上機的樣貌應該會更好理解        12/26 01:08
推 monnayeurs:第2個問題，我看過書上寫overflow:auto;width:100%      12/26 13:26
→ monnayeurs:不知道有沒有人這樣用過？實際上用起來會不會有問題呢   12/26 13:27
→ superpai:全部的方法：http://mzl.la/10hb5hZ                      12/26 13:52
→ monnayeurs:我再把問題說得明白一點，overflow:auto;width:100%;    12/26 14:18
→ monnayeurs:這種用法比較少見，是不是因為ＩＥ會出問題？           12/26 14:18
→ samuel1201:看不懂題目在幹嘛                                     12/26 16:15
→ samuel1201:但是我覺得你很厲害 哈哈                              12/26 16:26
→ hermitwhite:第一題：我在本板看到前也不知道有那東西，我之前的解  12/26 16:28
→ hermitwhite:　法都是手動完整定義過相關CSS（原理差不多就是）。   12/26 16:29
→ monnayeurs:even大之前有一篇回覆文，內文有提過第二個問題，       12/26 19:08
→ monnayeurs:「請問css的 :after 到底是要怎麼用」這一篇。          12/26 19:08
→ monnayeurs:看過就明白第2題是什麼了。                            12/26 19:12
→ superpai:overflow:auto很有可能出現捲軸所以會用hidden            12/26 20:10
→ superpai:至於width:100%，沒有作用。肯定是你記錯了               12/26 20:11
→ superpai:跟IE沒有關係                                           12/26 20:11
推 ibetuwahaha:推~~                                                12/27 05:42
推 monnayeurs:HTML&CSS網站設計建置優化之道，p.374                  12/27 10:41
→ monnayeurs:標題是：浮動元素的父元素：解決方案。                 12/27 10:42
→ monnayeurs:書上可能寫錯了，但是我可以證明不是我記錯了。         12/27 10:42
→ superpai:拍張圖來看看                                           12/27 13:10
推 LaPass:沒必要吧..... = =                                        12/27 13:14
推 aceone:http://www.quirksmode.org/css/clearing.html 有耶∼       12/27 14:02
→ kurtisgod:第二題請google "clearfix"                             12/27 14:02
→ aceone:可是這方法不太實用就是 XD                                12/27 14:03
推 Clovershine:第二題目前我都使用overflow:hidden讓它自己去抓高度   12/27 17:08
→ Clovershine:光用clear: both並不能完全解決高度問題               12/27 17:10
→ monnayeurs:是不是像上面的連結中最後一個解決方案，而width設定px  12/27 17:19
→ superpai:原來width:100%是IE hack，後來都是推薦用height:1%或是   12/27 21:14
→ superpai:*zoom:1                                                12/27 21:14
→ superpai:所以overflow:auto;width:100%少見是因為後來有更好用的   12/27 21:21
→ superpai:版本 overflow:hidden; *zoom:1;                         12/27 21:22
→ evenwu:大家都太在意題目了，當場考你有經驗絕對會答對，因為       12/27 22:59
→ evenwu:因為你會上機，而我都會在旁邊給提示...                    12/27 22:59
→ evenwu:但這三題如果看不懂，也是基本功有問題。                   12/27 23:01
→ evenwu:因為題目的用詞是標準化的，有很多人只會看程式碼           12/27 23:01
→ evenwu:那其實就會有溝通討論上的問題了                           12/27 23:02
→ evenwu:然而我不知道大家在意題目這麼多，文章重點不在題目上 XD    12/27 23:04
推 aceone:看不懂文字版的敘述也是不太行 因為溝通能力也蠻重要的 XD   12/27 23:30
推 grassboy2:有做題目有推~還滿好玩的題目啊XDDD                     12/29 03:50

----本文使用PCMAN+BBI轉貼----


※ 新版PCMAN開放測試中，新增功能：    



用PCMAN+BBI連回PTT原文