寫在前面的話
——————————————————————————————————————————————————————
9號晚上下班前接了個電話，通知我12號下午去搜狗面試，當時激動得，感覺幸運星降臨啊！！
我這種二流學校的學生也有大公司面試的機會啦！激動啊！
然后周六一如既往的加班了，周天在家從早到晚看知識點，以為自己掌握的都可以了，基本的問題可以對答如流了，
然后周一興沖沖的去面試了。
然鵝，然鵝！
機會給我了！我自己沒有抓住！心痛！痛的無法呼吸！
心痛之余，想了想，雖然沒進去，但是收獲還是相當大的，最最起碼，讓我意識到了，
原本我以為我知道的熟悉的東西，其實知道的並不是那么准確，或者說有些東西還是理解不到位。
加上因為目前所在公司的原因，除了周天天天加班不，說我一個前端還被拽去寫后台這種情況，
前端的需求真的是很少很少，少到我一個多月沒寫過頁面了，然后這么去面試了，本來就理解不到位，
加上時間長不寫頁面，技能生疏的厲害，結果只能說，還是自己沒准備好，只能怪自己。
無奈之余，回顧了下當時面試被問到的問題，總結了下自己的不足，偷摸寫下此文警醒自己！！！
同時把被問到的問題分享一下，希望對和我一樣的應屆畢業生有更多的幫助。
——————————————————————————————————————————————————————
本人在學校是學后台的，純自學轉的前端，可能有些見解不太准確或者可以說有錯誤，歡迎各位聚聚提出指正~O(∩_∩)O灰常感謝~
（正文開始）
總結下被問到的問題，有以下：
1.一般在什么情況下使用雪碧圖，把哪些圖合成雪碧圖，為什么把那些合成雪碧圖，其他的不合
2.CSS3有哪些新特性，animation和transition的區別
3.有哪些在實際開發的時候遇到的問題，最后自己解決了，說一說整個過程
4.網頁的圖片優化問題，都怎么優化圖片，對PS里面的各種選項了解嗎，存儲為JPG的時候一般用品質幾
5.IE瀏覽器的兼容性
6.盒模型
7.flex
8.媒體查詢的缺陷
9.除了用框架和媒體查詢外的其他的實現響應式的方法
問題不難，但是面試官問的很細，真的很細，細到我說不出來為止。鵝且，嗯。。（悄悄吐槽下，這個面試官。。嗯。不管我說的對錯，只聽我說，不作任何評論，最多就是微微皺眉，一般這個時候我就覺得我可能哪里說得不對了，所以以至於最后他問我問題我答出來的有問題，他不說對錯，我就繼續錯着往下說了，然后，被他錯着問了，然后說着說着發現不對勁，發現被他帶進坑了，然后最后超級簡單的問題把自己繞暈了，自己出不來了/(ㄒoㄒ)/~~。。從搜狗出來走在路上才捋清楚是怎么個情況。。。心塞塞。。。）其實還是怪自己基礎不夠扎實。所以我要好好學習！
然后來說說面試之后自己對以上問題的理解，如有問題歡迎各位指正！！！！！如果發現錯了一定要告訴寶寶啊！！！（認真臉！）有幾個問題我自己不知道，百度也沒百到，因為身邊沒有可以請教的人，等以后弄清楚之后再更。
1.一般在什么情況下使用雪碧圖，把哪些圖合成雪碧圖，為什么把那些合成雪碧圖，其他的不合
在網頁中使用雪碧圖的主要目的是為了優化頁面性能，因為頁面中的每一張圖片都需要提一次HTTP請求過去，圖片一多，請求一多，來回的響應時間加起來就比較長了，熟悉調試工具的童鞋們肯定都知道，開發者工具里面有個Network可以看到各種腳本啊圖片啊甚至可以具體到每個function的響應時間。看圖。
嗯。截這個圖的時候寶寶的網卡的要命。。（好像有點跑了。。言歸正傳）
所以，我們可以把小圖標，小按鈕，小圖片神馬的，合成雪碧圖。（嗯這是我當時回答的，自我感覺。。好像還可以。。）
然后，面試官問我，那你有木有自己總結過，哪些圖要合成雪碧圖，哪些不合雪碧圖。
關於這個問題，我的理解是，小圖標，小按鈕，小圖片什么的，放一起，合一下。
這個小。。多大以下算小我真的沒有量化過，我覺得，首頁輪播圖那么大的就不算小圖片了，就不合了吧。。。
因為之前看到過一篇博文講，合雪碧圖的時候，盡量吧顏色相近的放一起，假如只有4個色，
就沒必要用到256色槽了（至於256色…等我研究透了再補充…），這樣可以縮小圖片內存。
然后就是，首頁輪播圖之類的要展示的圖片，不合在一起。
不合的理由是，雪碧圖每次使用的時候需要定位，定位的時候是要占CPU內存的
（這個是后來走在路上才想起來，當時沒想起來(ノДＴ)，
所以雪碧圖用多了也不好，小個的圖片挨個提請求，不划算，但是大個的圖片如果合起來，
首先這個圖的內存會很可觀（一般展示用的大圖都不糙的吧…），其次，由於圖本身就大，
如果還合起來，很有可能提這一次http請求來傳輸這個圖片的時間就大於分開提好幾次的時間的和啦…（我猜的0.0，還沒驗證...）
關於雪碧圖的兩篇分享：
1.如何規划站點的雪碧圖 http://tid.tenpay.com/?p=93
2.雪碧圖在縮放場景下的特殊處理
http://efe.baidu.com/blog/sprite-scale/
————————————————————————————————————————————
今天更一下第二和第四個問題
CSS3有哪些新特性，animation和transition的區別
CSS3比起CSS2新增了很多新特性,比如子/后代選擇器、文字渲染text-decoration、邊框和顏色的透明度rgba（）、
border圓角border-radius、漸變效果gradient、陰影text-shadow和box-shadow、
彈性盒模型flex、動畫animation和transition等等，就不一一列舉了，貼上一篇好文給大家
http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
然后，animation和transition的區別：
這兩個都是動畫，transition通常和transform配合使用，主要關注的是動畫的過渡效果，不關注它過渡過程中的每一步細節是怎么實現的，
只需要給它參數告訴它起始和終止的兩種狀態的屬性值，按照Transition指定的方式進行過渡；
animation關注的是動畫實現的過程，它也可以通過制定某一屬性值的方式使用和transition同樣的方法，
但是它可以通過keyframe顯式控制當前幀的屬性值而transition不可以，所以相對而言animation的功能更加靈活。
另外一個區別是animation通過模擬屬性值改變來實現動畫，動畫結束之后元素的屬性沒有變化；
而Transition確實改變了元素的屬性值，動畫結束之后元素的屬性發生了變化；
網頁的圖片優化問題，都怎么優化圖片，存儲為JPG的時候一般用品質幾
1.使用雪碧圖（看上面↑）
2.PS中的相關圖片優化方法：將圖片存儲為web所用格式、使用web安全色、使用jpg的逐行掃描、透明圖片選擇png格式、動態圖片選擇gif格式
存儲為Web所用格式
“存儲為Web所用格式”（快捷鍵ctrl+alt+shift+s）可以將圖像保存成基於網頁設計優化過的格式，包括圖像質量、圖像分辨率、瀏覽器兼容性和文件大小。
這時候的優化就分為有損和無損兩種。無損數據壓縮保證了圖像在沒有任何品質和信息丟失的情況下重現，而有損數據壓縮的結果就是可能造成品質和信息的丟失。
主流無損媒介格式有gif和png，主流有損媒介jpg。
JPEG是日常中首選的圖片格式，它是以它的創造者“聯合圖像專家小組”來命名的。Jpeg之所以能夠成為標准，
是因為它在壓縮圖像數據的同時可以保留高品質，並且在相關信息上能夠接近無損圖像的效果。當你在保存圖片的時候，
有幾種網頁格式預設可供選擇。對於一張圖片，你應該考慮是使用JPEG 低、JPEG 中，還是JPEG高。
相比起超過250KB的源文件，我們選擇中等質量或者高等質量的壓縮預設就能夠得到一個大小不超過30KB，並有合適品質的圖片。
對於JPG格式的圖片，逐行掃描有時候是個不錯的選擇。在網站加載時，這種格式的圖像會逐漸呈現（即使在現代寬帶連接的互聯網時代，這種等待時間的類型已不是問題了）。
這使用戶在圖像完全加載之前便可快速預覽到，令人感覺網頁反應更快。
GIF是一種只用到256個顏色調色板的圖片格式，這讓它成為不需要使用太廣泛色域的網頁圖片的理想選擇。
因為GIF圖像受到256色的限制，它本應該極少被用到圖片中，但是他們恰好適合那些使用純色或是有限色彩的圖像。
對於圖片來說，通常來說不是使用JPEG有損壓縮，就是GIF無損格式。
PNG是一種類似於GIF的無損格式，只是它支持更為豐富的色彩（有時候也讓它的體積變大），而且可以支持帶透明圖層的Alpha通道，
而非單一透明像素，因此透明圖片選擇PNG格式。當圖片必須保留完整品質在網絡上進行傳輸的時候，PNG是最佳的選擇。
在選擇存為web所用格式的時候，左下角會有“下載時間”這一信息，你可以看到，在當前設置下，你所保存的圖片在你所選網絡連接狀態下的下載時間。
在存為jpg格式的時候會有一個對話框，其中有選擇品質的選項，如果對圖片要求較高，就選12最佳，通常情況下如果可以接受默認的品質時文件的大小就選默認，如果對文件大小有要求，一般選5-7，低於5就壓縮的比較厲害了。選項中的“連續”就是上面提到的jpg的逐行掃描。
