css筆試題整理(其他)

 1CSS Sprite是什麼,談談這個技術的優缺點。

CSSSprites在國內很多人叫css精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網絡流行的速度而言,不高於200KB的單張圖片的所需載入時間基本是差不多的,所以無需顧忌這個問題。

加速的關鍵,不是降低重量,而是減少個數。傳統切圖講究精細,圖片規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以,圖片越多請求次數越多,造成延遲的可能性也就越大。

CSS Sprites優缺點

  利用CSS Sprites能很好地減少了網頁的http請求,從而大大的提高了頁面的性能,這也是CSS Sprites最大的優點,也是其被廣泛傳播和應用的主要原因;

  CSS Sprites能減少圖片的字節,曾經比較過多次3張圖片合併成1張圖片的字節總是小於這3張圖片的字節總和。

  解決了網頁設計師在圖片命名上的困擾,只需對一張集合的圖片上命名就可以了,不需要對每一個小元素進行命名,從而提高了網頁的製作效率。

  更換風格方便,只需要在一張或少張圖片上修改圖片的顏色或樣式,整個網頁的風格就可以改變。維護起來更加方便。

  誠然CSS Sprites是如此的強大,但是也存在一些不可忽視的缺點,如下:

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

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

  CSS Sprites在維護的時候比較麻煩,如果頁面背景有少許改動,一般就要改這張合併的圖片,無需改的地方最好不要動,這樣避免改動更多的css,如果在原來的地方放不下,又只能(最好)往下加圖片,這樣圖片的字節就增加了,還要改動css

  CSS Sprites非常值得學習和應用,特別是頁面有一堆ico(圖標)。總之很多時候大家要權衡一下利弊,再決定是不是應用CSS Sprites

2、以CSS3標準定義一個webkit內核瀏覽器識別的圓角(尺寸隨意)

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

3、有這麼一段HTML,請挑毛病:

<P>  哥寫的不是HTML,是寂寞。<br><br>  我說:<br>不要迷戀哥,哥只是一個傳說

 缺少p標記的結束標記。

4、列舉常用的瀏覽器類型以及他們使用的內核還有對應的調試工具
常用的有IE(6,7,8,9,10,FF,chrome )
IE
常用的調試工具有 IEWebDeveloper (IE9默認有安裝)
Firefox
大家估計用的最多。firefox
chrome(
內核webkit) 自帶的有google 開發的內置調試工具。
三者內核各不相同。
其它還有opera,遨遊,世界之窗等;
chrome
內核跑的比較快,安全。Firefox做調試是最棒的。


5html5css3有什麼新特性
html5強化了 Web 網頁的表現性能,如:nav header section canvas等,語義化更強
css3
新特性有陰影特效,圓角處理等,都是非常不錯的效果;

6、說出其他瀏覽器和IE瀏覽器在頁面元素引用有什麼區別?
這個和內核有關係,及是否w3c來定製,不同瀏覽器渲染結果不同。
目前國內還有大部份使用IE6,常常web在製作的時候碰到兼容性的問題:
如:
display-block, padding, margin
等盒子模型比較多。還有不同的字間距等產生的問題;
常用解決的方法:
IE6
_xxx:{}
IE7
*
等處理不IE和其它不同瀏覽器間的差異
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章