製作網頁時，除了版面風格設計會使用到影像圖片，其他如按鈕標題等...也都會使用代表圖示來襯托文字。不過，當頁面的影像圖示使用越多，使用者在瀏覽網頁時則需要花更多的時間在影像圖片的處理。現在有了CSS Sprites技術，可以將圖檔合併成一張大圖檔，使用時則利用定位屬性來顯示其位置。這樣的做法可有效降低圖片的http請求數，進而提升網頁頁面讀取的速度。

以yahoo為例，首頁的圖檔非常多，在讀取跟管理都會非常不易。所以利用CSS Sprites技術，把所有圖示合併(如連結圖)，可以有效的加快'讀取網頁圖片速度。連結yahoo css sprites圖示

CSS SPRITES GENERATOR使用教學

CSS Sprites Generator網站使用上非常簡單，圖示欄位最初只有三個，如果不夠的話可以點 "Need More »" （每次增加三個）將你的圖片加進去，在點 Generate。


上傳後，會出現合併完成的 PNG 檔以及範例頁面，下方則出現圖檔的 background-position的設定值。

Flex 包含了 MXML 和 ActionScript 兩個部份。MXML 是宣告式 XML 語言，用於描述使用者介面版面和行為。物件導向 ActionScript® 3.0 程式設計語言則用於建立用戶端邏輯。而目的則是要取代傳統 HTML + JavaScript 為主的網頁客戶端程式設計。讓你很容易設計出有質感的動態網頁。
如Flex 的範例程式: Flex Store

方框區塊的概念

邊界重疊

●垂直排列的兩個block box

下圖為兩個垂直的block box，第一個block box的下邊界為20px與第二個block box的上邊界20px重疊，因而成為一個邊界。會以邊界值最大者為其邊界值。

●上邊界的重疊（互為父子元素）

在指定父box的上邊界20px、子box的上邊界為20px分別存在的情況下，而padding與margin的屬性未設定時，邊界會成為兩個邊界值最大者。