前端進階試題css（來自js高級前端開發---豪情）既然被發現了HOHO，那我就置頂了嘿嘿！以爲本身技術OK的能夠把這套題目作完哦，而後加入高級前端的社區咯

http://www.cnblogs.com/jikey/p/4426105.html

js高級前端開發加羣方法（此羣很難進，裏面純技術，嚴禁廣告，水羣）

完整題目作完發郵箱(jikeytang@163.com)，通過評級審覈後邀請進入

 

一. css 40分

1. 什麼是盒模型？    2. Doctype的幾種類型？   3. 如何佈局左不動右邊自適應的兩列布局？

 4. 如何佈局兩列等高？    5. 如何佈局右側定寬，左側或中間自適應？

  6. 如何佈局三列自適應？  7. gif,png,jpg的區別？   8. 什麼是css sprite?優缺點？ 10. 製做細線表格？   11. position:relative,absolute,fixed區別與聯繫？   12. 如何居中一個float:left的元素

 13. Css在各瀏覽器下的兼容問題你一般是怎麼來解決的，請分享你的經驗；

 

1、邊界、邊框、填充、內容四個屬性

 

 

二 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

 

DOCTYPE html

 

三能夠參照百度網盤

左邊欄，float:left width:300px;

右邊欄，margin-left：300px；

 

四，五，六均爲佈局。。。

 

7，gif,png,jpg

   1. 優秀的壓縮算法使其在必定程度上保證圖像質量的同時將體積變得很小。
   2. 可插入多幀，從而實現動畫效果。
   3. 可設置透明色以產生對象浮現於背景之上的效果。

 

png

* 支持256色調色板技術以產生小體積文件
    * 最高支持48位真彩色圖像以及16位灰度圖像。
    * 支持Alpha通道的半透明特性。
    * 支持圖像亮度的gamma校訂信息。
    * 支持存儲附加文本信息，以保留圖像名稱、做者、版權、創做時間、註釋等信息。
    * 使用無損壓縮。
    * 漸近顯示和流式讀寫，適合在網絡傳輸中快速顯示預覽效果後再展現全貌。
    * 使用CRC循環冗餘編碼防止文件出錯。
    * 最新的PNG標準容許在一個文件內存儲多幅圖像。

 

jpg

JPEG/JFIF是最廣泛在萬維網（World Wide Web）上被用來儲存和傳輸照片的格式。JPEG在色調及顏色平滑變化的相片或是寫實繪畫（painting）上能夠達到它最佳的效果。在這種狀況下，它 一般比徹底無失真方法做得更好，仍然能夠產生很是好看的影像（事實上它會比其餘通常的方法像是GIF產生更高品質的影像，由於GIF對於線條繪畫 （drawing）和圖示的圖形是無失真，但針對全綵影像則須要極困難的量化）。

 

 

簡單點gif體積小，能不用濾鏡兼容ie6，就是顏色差點

png，體積大，色彩好，須要濾鏡兼容IE6

jpg，色彩本身選，要好的色彩體積就變大，不透明

 

上面寫了那麼大一串是給美工，設計看的！前端只要這麼點就OK了

 

 

8 什麼是css sprite?優缺點？

就是css小精靈

 

CSS Sprites優缺點

 

優點

 

1.利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；

 

2.CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。

 

3.解決了 網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。

 

4.更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便。

 

缺點

 

誠然CSS Sprites是如此的強大，可是也存在一些不可忽視的缺點，以下：

 

1.在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在 寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂；

 

2.CSS Sprites在開發的時候比較麻煩，你要經過 photoshop或其餘工具測量計算每個背景單元的精確位置，這是針線活，沒什麼難度，可是很繁瑣；幸虧 騰訊的鬼哥用 ADOBE AIR開發了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，可是已經比photoshop測量來的方便多了，並且樣式直接生成，複製，拷貝就OK！

 

3.CSS Sprites在維護的時候比較麻煩，若是 頁面背景有少量改動，通常就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的 css，若是在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節就增長了，還要改動css。

 

4.CSS Sprites很是值得學習和應用，特別是頁面有一堆icon（圖標）。總之不少時候你們要權衡一下利弊，再決定是否是應用CSS Sprites。

 

 

 

十border-collapse:collapse

 

 

十一position:relative,absolute,fixed區別與聯繫？

相對，絕對，浮動。。。基本都用過不介紹了

 

 十一如何居中一個float:left的元素

 

margin-left:50%;  position:relative; left:width除2 

。。。這個方法是我想的笨辦法，若是有更好的能夠提出



 Css在各瀏覽器下的兼容問題你一般是怎麼來解決的，請分享你的經驗；hack。。。頁面的規範！。。。好吧這玩意已經變成一種習慣了。。。基本一次成型怎木辦IE6濾鏡css3的部分屬性兼容ie6，pie.js