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

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

margin

margin干嘛的不再多說了，margin屬性有個很有名很經(jīng)典的現(xiàn)象：

塌陷現(xiàn)象

塌陷現(xiàn)象里又有兩種：

• 垂直方向
• 層級嵌套

垂直方向：

例：

效果：

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

效果：

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

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

層級嵌套：

效果展示：

現(xiàn)在給子盒子box2添加一個margin-top屬性：

效果：

發(fā)現(xiàn)并不是子盒子box2與父盒子box1之間產(chǎn)生了間隔，而是box1帶著box2一起對父級（也就是body標(biāo)簽）產(chǎn)生了間距20px

以上兩種現(xiàn)象就是很經(jīng)典的margin塌陷現(xiàn)象

解決塌陷現(xiàn)象方法

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

margin屬性設(shè)置元素居中顯示

margin：0 auto

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

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

margin-left:auto

當(dāng)發(fā)現(xiàn)盒子盡可能大的右邊有很大的距離，沒有什么意義

margin-right:auto

當(dāng)發(fā)現(xiàn)盒子盡可能大的左邊有很大的距離。當(dāng)兩條語句并存的時候，會發(fā)現(xiàn)盒子盡可能大的左右兩邊有很大的距離。此時盒子居中了。

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

使用margin：0 auto注意點：

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

padding

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

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

background

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

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

單詞

單詞就不多說了

rgb：

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

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主要是設(shè)置透明度，可以半透明之類的

例：

效果：

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

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

opacity

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

效果：

 rgba和opacity的區(qū)別：

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

16進制表示法

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

例：

紅色：background-color: #ff0000

灰色：background-color: #cdcdcd

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

雪碧圖（精靈圖）技術(shù)

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

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

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

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

右鍵圖片地址，選擇復(fù)制鏈接：

然后打開鏈接看看：

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

剛才那個圖片是這樣的：

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

 現(xiàn)在相信各位已經(jīng)懂了什么是雪碧圖了吧？

使用雪碧圖的好處：

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

不足：

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

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

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

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

background-attach

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