為什麼這篇網頁設計 考題鄉民發文收入到精華區：因為在網頁設計 考題這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者evenwu (EvenWu)看板Web_Design標題[心得] 給網頁設計師的建議時間Sun...
網頁設計 考題 在 英文熬夜室 - 學測考過的單字都在這！ Instagram 的最讚貼文
2021-08-02 19:04:33
#抽獎#抽獎文 #抽獎活動 ✍️今日學測單字出自於《108學測英文第8題》 This TV program is designed for children, _____ for those under five. It contains no violence or strong langu...
原文
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 … 但一個 <span> 元素該如何
讓他有寬度，需要下 display: block 改變原本 inline 的類型，就考驗了你是否原本
就知道 <span> 預設是 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元素的意思是<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
→ 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
→ 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
推 GuCD:我只會一題...>< 01/08 15:59
推 cadmus22:很有趣的問題, 真想看全部考題..轉職後也很少碰css了 01/10 14:29