記一次糟心的前端筆試(1)
似乎一直以來，自己的筆試成績都不怎麽樣。自己算是完全自學的前端，各種知識基本上都是從互聯網中拼湊而來，也完全不知道這些知識的可信度有多少。畢業這一路下來的打擊基本把我的自信都磨光了。自己學會了用質疑的眼光去看待事物，同時也明白了一個道理，當一件事情涉及到除你之外的任何人時，就不要想當然。我各種觀念算是崩潰了，但是自己就是不願服輸。世人總是看結果的，而我現在正是這樣一個失敗者。
敗就敗了，沒什麽好怨的，總結失敗，下次再有人這樣問就糊他一臉。
這次筆試事先也大概了解了一下，都是一些比較簡單的題目。粗略一掃，首先映入我眼簾的是第3道題。怎樣用純css來實現一個三角形。是吧，很簡單。我不會。嗯，以前我也在網上看過這樣的文章，當時也是粗略看了一下，也知道大概利用border是可以實現的。只是當時覺得，為什麽要用css來實現這種三角形呢，想來想去沒想到理由，大概就這樣過了，想著以後遇到這樣的需求再看，挺簡單的，直到今天看到這題。
mmp，行。百度一搜就有很多實現方法了，有興趣可以去看看，這裏只說一種利用border的實現方法。代碼如下:
.triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
當然只知道代碼是怎樣寫是遠遠不夠的，我自己可能對盒模型的理解還不夠，不然應該能在當場就想到實現方法的。以前沒有太留意過瀏覽器對border表現的具體細節，下面整理一下這樣實現的思路。個人喜歡用span標簽來做一些這種測試，假設已經有<span class="triangle-up"><span>這樣一個標簽，看下面這段代碼：
.triangle-up{
display: block;
font-size: 0;
width: 10px;
height: 10px;
border-top: 100px solid #f00;
border-right: 100px solid #00f;
border-bottom: 100px solid #f00;
border-left: 100px solid #0f0;
}
設置font-size為0是為了清除span內容的默認高度，這個可以先不用理，後面才會有用。在瀏覽器中看到的大概是這樣子的：
中間的白色區域是內容，有顏色的部分就是邊框了。可以看到當4個邊框都存在的時候，4個邊框是類似於梯形一樣契合的，而當有邊框邊框不存在的時候，比如設置 border-top：0； 後，在瀏覽器中看到的大概是這樣子的：
當然還是梯形，只是直觀上有些區別。好了理解了瀏覽器對border的具體表現之後，就可以想象一下當內容為空的時候，也就是 width: 0; height: 0; 的時候，上面的圖片會變成什麽樣子。答案應該很明顯：
這兩張圖分別對應上面的兩張圖。如果我們單純只是要一個三角形，就可以把其它的邊框顏色設置為trasparent（透明），把想要的那個留下來（註意這樣設置只是顏色變為透明，其邊框還是會占空間的）。
不知道這是不是出題者想要看到的答案，不過既然玩了，就玩大點，看看設置圓角(border-radius)之後會怎樣。以上的表現是在firefox（Gecko/20100101 Firefox/47.0）和chrome（AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0）中測試的，加上border-radius: 20px; 之後，對於四個邊框都存在的情況，其在firefox和chrome中的表現符合預期，就像下面展示的那樣:
前者為firefox ， 後者為chrome。但當某一邊框不存在（或者寬度為0）的時候，兩個瀏覽器的表現就匪夷所思了。這裏依然是以border-top: 0 為例：
firefox中間部分不知為什麽會出現一些不規則的塊，而在chrome中則變成這樣：
；好像很好看的樣子，嗯，但是好像有哪裏不對。。。下邊框呢？嗯？下邊框去哪裏了？改變下邊框的厚度還可以改變這顆藥丸的高度，哈哈好像還挺好玩的樣子，不過就是不知道你們瀏覽器在想什麽。進而將左邊框也設置為0的話，firefox中會像這樣子：
； 而chrome中則是這個樣子：
，還是迷之沒有下邊框，而且右邊框中左上和左下兩個角也圓角化了。
ps:以上所有圖皆經過縮放，只為給讀者提供一個主觀印象，並無法代表其真實大小。
第一次寫文，筆試中糟心的事才只寫了一件，竟然已經這麽長了。篇幅原因，其它的問題就在另一篇中寫吧。就這樣，水平有限，大家應當以質疑的眼光看待這篇文章，如果有什麽不足或者錯誤的地方，歡迎指出。謝謝
記一次糟心的前端筆試(1)