圖片整合的概念
用background-position”來實現背景圖片的定位技術,這種技術可以成為css sprites技術，又稱為css精靈。
方法
將導航背景圖片，按鈕、背景小圖示等小圖片有規則的合併成一張背景圖，即將多張圖片合為一張整圖，再利用background屬性進行背景定位，用數字精確的定位出背景圖片在佈局盒子中的位置。
整合的好處
1）通過圖片整合來減少對伺服器的請求次數，從而提高 頁面的載入速度。
2）通過整合圖片來減小圖片的體積。

寬高自適應
定義：
網頁佈局中經常要定義元素的寬和高。但很多時候我們希望元素的大小能夠根據視窗或子元素自動調整，這就是自適應。
優點：
元素自適應在網頁佈局中非常重要，它能夠使網頁顯示更靈活，可以適應在不同裝置、不同視窗和不同解析度下顯示。
1）寬度自適應
        元素寬度設定為100%。（塊元素寬度預設為auto）
 
2) 高度自適應

     【1】元素高度自適應視窗高度

        設定方法：html,body{height:100%;}（寫一個滿屏頁面）
 
        【2】子元素自適應父元素高度：height:100%;
        【3】元素具備最小高度的自適應
min-height屬性：最小高度；(IE6瀏覽器不識別該屬性)
什麼時候用？當元素內容的高度不確定的時候用min-height;
最小高度相容IE6的寫法：
方法1:min-height:value; _height:value;

方法2:min-height:value;  height:auto!important; 
  height:value;(屬性順序不能改變，建議使用)

!important關鍵字過濾器，寫在屬性值的後面，加上此單詞,屬性具有最高的優先順序，但是ie6不能識別此關鍵字；
min-height（最小高度,設定此屬性後，內容高度小於此高度,顯示此高度；大於容器高度時，容器自適應高度；）
max-height(最大高度，設定此屬性後，內容高度小於此高度時，顯示內容高度；內容高度超過此高度時顯示此高度)
min-width(最小寬度,設定此寬度後，瀏覽器寬度小於此寬度時顯示滾動條，大於此寬度時，適應瀏覽器寬度；)
max-width(最大寬度，設定此屬性後瀏覽器寬度小於此容器時，會適應內容寬度而不出現滾動條)

（4）浮動元素父元素高度自適應（父元素不寫高度時，所有子元素寫了浮動後，父元素會發生高度塌陷）

hack1：給父元素新增宣告overflow:hidden;

hack2:在最後一個浮動元素下方新增空div,並給該元素新增宣告：clear:both;height:0;overflow:hidden;

hack3:萬能清除浮動法
父元素選擇符:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

偽物件選擇符
1）、:after與content屬性一起使用，定義在物件後的內容。
如：div:after{content:url(logo.jpg);}
      div:after{content:"文字內容";}
2）、:before與content屬性一起使用，定義在物件前的內容。
如：div:before{content:"在其前放內容";}
3）、：first-letter定義物件內第一個字元的樣式。
4）、：first-line定義物件內第一行的樣式。

說明：
(該偽元素只能用於塊級元素。)
ie6及以下版本瀏覽器不支援偽物件選擇符。

visibility:hidden/visible;隱藏/可見
visibility:hidden;和display:none;的區別：
visibility:hidden;屬性會使物件不可見，但該物件在網頁所佔的空間沒有改變，等於留出了一塊空白區域，而 display:none屬性會使這個物件徹底消失。