前言
我的CSS一直是一塊短板，原因就是前幾年對CSS不重視，現在重視了項目經驗又不足，所以在這塊上我是下了很大功夫的，也看了一點書，做了點東西，希望在幾個項目后CSS水平有所提高！
完了，我最近在思考自己的CSS是短板，那么JS就是強項了嗎？卻發現自己前端水平貌似也不是很高，於是又開始走老路開始自卑起來了，於是這個時候我們要嘛做點實事做點項目，不然就在網上搞幾道面試題來干干，這對個人提高很不錯的。
我之前有一段時間有點迷茫，並且找不到學習的方向與方法，卻在一次面試過程中從新獲得了專注的力量，所以我們不要小看了面試題帶來的沖擊，面試題是幫助前端人員提高的非常好的途徑呢！我不CSS是短板嗎，好的那就上兩道CSS的面試題好了。
進入正題
使用 HTML+CSS 實現如圖布局，border-widht 5px，一個格子大小是 50*50，hover時候邊框變為紅色（兼容IE6+，考慮語義化的結構）。
使用一個標簽和純CSS <a href="#" title="訂閱博客">訂閱博客</a> 實現如圖效果，文字始終保持左邊距10px, 下邊距5px，改變字體大小（12px-50px）時，邊距保持不變，不使用 content:"訂閱博客"，兼容現代瀏覽器
俗話說得好，有圖有真相，兩道題都出來了，我們來看看吧
題目一
對於初看題目一，小的第一印象便是非常簡單，但真的簡不簡單現在還不好說，真的簡單估計就不會出了吧，我估計被坑了。
先上預覽地址：http://sandbox.runjs.cn/show/xhqxoohd
他這個是個標准的九宮格，我這里可以不要臉一點用table試試：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 * { margin: 0; padding: 0; } 7 #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; } 8 </style> 9 </head> 10 <body> 11 <h1> 12 丑陋的table</h1> 13 <table id="test01"> 14 <tr> 15 <td> 16 1 17 </td> 18 <td> 19 2 20 </td> 21 <td> 22 3 23 </td> 24 </tr> 25 <tr> 26 <td> 27 4 28 </td> 29 <td> 30 5 31 </td> 32 <td> 33 6 34 </td> 35 </tr> 36 <tr> 37 <td> 38 7 39 </td> 40 <td> 41 8 42 </td> 43 <td> 44 9 45 </td> 46 </tr> 47 </table> 48 <hr /> 49 </body> 50 </html>
PS：我這里叫它丑陋的table，其實table不丑陋，我才丑陋，就拿這道題你來說，最后真的用table實現的話也沒什么問題的，我們談論一個事情時候不應該起分別心，比如幾年前我們用百分比布局，有人會說你是錯的，那現在呢？？？偉大的設計可能會重新占領市場，table也可能屌絲逆襲的。
初步做出來就是這個樣子了，我們發現表格之間是有間隙的，所以我們需要先去掉間隙先：
cellpadding="0" cellspacing="0"
這是我第一時間想的的辦法，但是這個可能不是我想要的解決辦法，於是最終找到了這個東東：
border-collapse:collapse;
不錯了，這就是我想要的東西，
border-collapse 屬性設置表格的邊框是否被合並為一個單一的邊框，還是象在標准的 HTML 中那樣分開顯示
separate
默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse
如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit
規定應該從父元素繼承 border-collapse 屬性的值。
於是我們再改下代碼，我們就得到了這個東東：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 * { margin: 0; padding: 0; } 7 #test01 { border-collapse:collapse;} 8 #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; } 9 #test01 td:hover { border-color: Red;} 10 11 </style> 12 </head> 13 <body> 14 <h1> 15 丑陋的table</h1> 16 <table id="test01"> 17 <tr> 18 <td> 19 1 20 </td> 21 <td> 22 2 23 </td> 24 <td> 25 3 26 </td> 27 </tr> 28 <tr> 29 <td> 30 4 31 </td> 32 <td> 33 5 34 </td> 35 <td> 36 6 37 </td> 38 </tr> 39 <tr> 40 <td> 41 7 42 </td> 43 <td> 44 8 45 </td> 46 <td> 47 9 48 </td> 49 </tr> 50 </table> 51 <hr /> 52 </body> 53 </html>
無論如何，這都不是我想要的東西，並且他不會兼容IE6的，於是我想到了絕對定位，那么我們來試試絕對定位吧：
#test02 { position: relative; }
#test02 a { border: 5px solid blue; width: 50px; height: 50px; text-align: center; display: block; position: absolute; }
我原本想把a標簽設置為inline-block，但是IE6好像不支持，是不是支持我還真不知道了，我電腦上都不能看呢。。。。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 * { margin: 0; padding: 0; } 7 #test01 { border-collapse: collapse; } 8 #test01 td { border: 5px solid blue; width: 50px; height: 50px; text-align: center; } 9 #test01 td:hover { border-color: Red; } 10 11 #test02 { position: relative; z-index: 1; } 12 #test02 a { border: 5px solid blue; width: 50px; height: 50px; _width: 60px; _height: 60px; text-align: center; display: block; position: absolute; z-index: 2; } 13 #test02 a:hover { border-color: Red; z-index: 3; } 14 </style> 15 <!--<script src="../jquery-1.7.1.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(document).ready(function () { 18 var tb = $('#test02'); 19 for (var i = 1; i < 10; i++) { 20 var c = parseInt((i - 1) / 3); 21 var t = c * 50; 22 var ll = i % 3 == 0 ? 3 : i % 3; 23 l = (ll - 1) * 50; 24 if (l != 0) { 25 l += 5 * (ll - 1); 26 } 27 if (t != 0) { 28 t += 5 * c; 29 } 30 var tmp = $('<a href="javascript:;" style="left:' + l + 'px; top: ' + t + 'px">' + i + '</a>'); 31 tb.append(tmp); 32 } 33 }); 34 </script>--> 35 </head> 36 <body> 37 <h1> 38 丑陋的table</h1> 39 <table id="test01"> 40 <tr> 41 <td> 42 1 43 </td> 44 <td> 45 2 46 </td> 47 <td> 48 3 49 </td> 50 </tr> 51 <tr> 52 <td> 53 4 54 </td> 55 <td> 56 5 57 </td> 58 <td> 59 6 60 </td> 61 </tr> 62 <tr> 63 <td> 64 7 65 </td> 66 <td> 67 8 68 </td> 69 <td> 70 9 71 </td> 72 </tr> 73 </table> 74 <hr /> 75 <h1> 76 a的絕對定位</h1> 77 <div id="test02"> 78 <a style="left: 0px; top: 0px" href="javascript:;">1</a><a style="left: 55px; top: 0px" 79 href="javascript:;">2</a><a style="left: 110px; top: 0px" href="javascript:;">3</a><a 80 style="left: 0px; top: 55px" href="javascript:;">4</a><a style="left: 55px; top: 55px" 81 href="javascript:;">5</a><a style="left: 110px; top: 55px" href="javascript:;">6</a><a 82 style="left: 0px; top: 110px" href="javascript:;">7</a><a style="left: 55px; top: 110px" 83 href="javascript:;">8</a><a style="left: 110px; top: 110px" href="javascript:;">9</a></div> 84 <hr /> 85 </body> 86 </html>
於是我們實現了功能，因為在IE6下面css 盒模型解析有誤，所以還進行了一點hack處理，現在我們回頭看看這道題我做的有什么不足。
看了代碼的朋友可能會注意到，我其實是使用js生成的html代碼，js代碼就不用看了，沒經過思考的，但是每個元素上面都會有style
我不知道大神是怎么做的，但我能想到的就是這個樣子了，至於這道題究竟想考察什么，小的我也不知道了。。。。不明覺厲！
再一次附上預覽地址：
http://sandbox.runjs.cn/show/xhqxoohd
於是，我們進入下一個題目吧。
第二題
首先附上預覽地址：http://sandbox.runjs.cn/show/7vpjps1r
說實話，望着第二題，我看了很久對其中一個詞語沒有搞懂“現代瀏覽器”，這里所說的現代瀏覽器是指IE9+的瀏覽器嗎？？？
但是搞到現在，如果不使用HTML5和CSS3的東西就用純html，我怕我是實現不了的，於是我們在看看他這個題目
前面鼠標以上后，文字變慢慢變大，而且似乎只有一個a標簽<a href="#" title="訂閱博客">訂閱博客</a>，下面那根紅線應該是其他的吧？
但是對於CSS3來說，這個題好似沒什么難度，但會是坑嗎？我們來看看：
PS：文字詳細說了是一個a標簽，所以我這里應該只能用一個標簽吧
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style> 6 * { margin: 0; padding: 0; } 7 a { display: block; border-bottom: 4px solid red; text-decoration: none; color: Gray; font-size: 12px;
transition: font-size 1s; padding: 0 0 5px 10px; } 8 a:hover { font-size: 50px; } 9 </style> 10 </head> 11 <body> 12 <a href="#" title="訂閱博客">訂閱博客</a> 13 </body> 14 </html>
於是我感覺怎么莫名其妙的就做完了。。。。也不知道對不對。。。
http://sandbox.runjs.cn/show/7vpjps1r
結語
之前我們項目經理說過，沒事出去面試一下，會得到增長的，到我這里就變成了沒事做兩道面試題會有好處的，呵呵，希望這兩道題能給各位代理樂趣。
如果覺得不錯，就幫頂喲