摘要：維護起來更加方便不足雪碧的最大問題是內存使用拼圖維護比較麻煩使的編寫變得困難雪碧調用的圖片不能被打印我們可以使用綜合屬性制作通天，什么是通天呢，就是一般我們電腦的屏幕都是但是設計師給我們的圖都會比這個大，那么我們可以此屬性來制作通天。

要說頁面布局的話，那就必須說說margin，padding，和background。這三個屬性其實都是前面講過的，這里還是再次講解以下，為什么呢？因為是這樣的，光靠前面的css樣式來設置，你很可能會遇到很多的問題，而且還不知道怎么解決，所以，這里再拿出來講解下

margin

margin干嘛的不再多說了，margin屬性有個很有名很經典的現象：

塌陷現象

塌陷現象里又有兩種：

• 垂直方向
• 層級嵌套

垂直方向：

例：

效果：

首先，這個效果沒什么，我給上面的盒子加個margin-bottom屬性，給下面的盒子加個margin-top屬性：

效果：

上面和下面的盒子間距并不是我們以為的間距為60px，而是40px。這個怎么回事呢？

還是標準文檔流下的問題，當給兩個標準流下兄弟盒子 設置垂直方向上的margin時，那么以較大的為準，也就是說就會以下面設置40px為準。不信的話，你可以把下面的margin-top改成10px，然后打開瀏覽器呈現的效果絕對是間距為20px，即以上面的盒子設置的margin-bottom：20px為準

層級嵌套：

效果展示：

現在給子盒子box2添加一個margin-top屬性：

效果：

發現并不是子盒子box2與父盒子box1之間產生了間隔，而是box1帶著box2一起對父級（也就是body標簽）產生了間距20px

以上兩種現象就是很經典的margin塌陷現象

解決塌陷現象方法

• 為父盒子設置border，為外層添加border后父子盒子就不是真正意義上的貼合。
• 為父盒子添加overflow：hidden；
• 為子盒子設置浮動float
• 為父盒子設定padding值

margin屬性設置元素居中顯示

margin：0 auto

 當一個div元素設置margin：0 auto;時就會居中盒子，表示上下外邊距離為0，左右為auto的距離，auto即表示自動的意思，默認自動居中

div{
 width: 800px;
 background-color: red;            
 margin: 0px auto;/*水平居中盒子*/
 text-align: center;/*水平居中文字*/
}

margin-left:auto

當發現盒子盡可能大的右邊有很大的距離，沒有什么意義

margin-right:auto

當發現盒子盡可能大的左邊有很大的距離。當兩條語句并存的時候，會發現盒子盡可能大的左右兩邊有很大的距離。此時盒子居中了。

另外如何給盒子設置浮動，那么margin:0 auto失效。

使用margin：0 auto注意點：

• 使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;
• 只有標準流下的盒子 才能使用margin:0 auto;當一個盒子浮動了，固定定位，絕對定位(后面會講)，margin:0 auto沒效果
• margin：0 auto居中盒子，而不是居中文本，文字水平居中使用text-align: center
• margin屬性是描述兄弟盒子的關系，而padding描述的是父子盒子的關系

padding

padding就是設置該元素的內層內容距離該元素邊框的間距，學完上面的margin，你也許會覺得margin很好用，很方便，但是真正的開發，用的更多的是padding，所以請善于使用padding來控制頁面布局，上面的margin你也許注意到了設置border的妙用，為外層父盒子添加border后，父盒子與子盒子就不是真正意義上的貼合，這樣就可以實現子盒子內容與父盒子的間距感，讓頁面看起來相對好看，但是無緣無故的給一個border始終不是很理想，所以你完全可以直接給子盒子設置padding屬性:

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: orange;
            padding:5px
        }

background

背景屬性也是挺重要的，很多頁面其實就是因為各種顏色的組合，讓頁面看起來好看，所以這里就著重講一下顏色值的設置

首先，我們都知道有四種方法表示顏色：單詞、rgb表示法、rgba表示法，十六進制表示法。

單詞

單詞就不多說了

rgb：

每個像素都是由三原色（紅色 綠色 藍色）的發光原件組成的，靠明亮度不同調成不同的顏色的。

rgb表示用逗號隔開，r、g、b的值，每個值的取值范圍0~255，一共256個值。

如果此項的值，是255，那么就說明是純色

例：

黑色：background-color: rgb(0,0,0)

顏色可以組合疊加，比如黃色就是紅色和綠色的疊加：background-color: rgb(255,255,0)

紅、綠、藍三種顏色的不同比例疊加：

background-color: rgb(111,222,215)，這個我也不知道什么顏色，你們自己去測試了

rgba

rgba其實就是源于rgb，不過rgba主要是設置透明度，可以半透明之類的

例：

效果：

看出來了吧？說白了就是在rgb后面再加一個0-1之間的數，并把rgb改為rgba即可

既然說這個透明度，那么再說說這個屬性：

opacity

其也是設置透明度，值在0-1之間，再看這個例子：

效果：

 rgba和opacity的區別：

rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色

16進制表示法

用#開頭的值，表示16進制，#后面可以是三個數字，也可以是6個數字，但每個數字都在1-9和a-f之間

例：

紅色：background-color: #ff0000

灰色：background-color: #cdcdcd

說完以上的顏色設置，那么還有個很精單的技術

雪碧圖（精靈圖）技術

CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術，該方法是將小圖標和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分

CSS 雪碧圖其實就是截取大圖一部分顯示，而這部分就是一個小圖標，這里就直接給抽屜網站的案例給大家展示吧：

途中我圈出來的地方其實就是雪碧圖，可以打開css查看：

看到了吧，然后打開這個圖看看到底是什么鬼：

右鍵圖片地址，選擇復制鏈接：

然后打開鏈接看看：

看到了吧？就是這種小圖標組成的一張大圖，這種就是雪碧圖，然后利用background-position控制位置即可：

剛才那個圖片是這樣的：

我在線編輯，修改了background-position的位置值之后就這樣了：

 現在相信各位已經懂了什么是雪碧圖了吧？

使用雪碧圖的好處：

• 利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
• CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和。
• 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
• 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便

不足：

• CSS雪碧的最大問題是內存使用
• 拼圖維護比較麻煩
• 使CSS的編寫變得困難
• CSS 雪碧調用的圖片不能被打印

我們可以使用background綜合屬性制·作通天banner，什么是通天banner呢，就是一般我們電腦的屏幕都是1439.但是設計師給我們的banner圖都會比這個大，

那么我們可以此屬性來制作通天banner。

background:  red  url(./XXX.png)  no-repeat   center top;

background-attach

設置fixed之后，該屬性固定背景圖片不隨瀏覽器的滾動而滾動