前端進階試題css（來自js高級前端開發---豪情）既然被發現了HOHO，那我就置頂了嘿嘿！覺得自己技術OK的可以把這套題目做完哦，然后加入高級前端的社區咯

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

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

完整題目做完發郵箱([e-mail])，經過評級審核后邀請進入

 

一. 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在各瀏覽器下的兼容問題你通常是怎么來解決的，請分享你的經驗；

 

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

 

 

二 

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