background:
顏色表示法: 單詞; rgb表示法; 十六進制表示法
rgb:紅色 綠色 藍色 三原色
光學顯示器，每個像素都是由三原色的發光原件組成的，靠明亮度不同調成不同的顏色的。
用逗號隔開，r、g、b的值，每個值的取值范圍0~255，一共256個值。
如果此項的值，是255，那么就說明是純色
黑色：
光學顯示器，每個元件都不發光，黑色的。
白色：
顏色可以疊加，比如黃色就是紅色和綠色的疊加：
再比如：
就是紅、綠、藍三種顏色的不同比例疊加。
十六進制表示法:
詳情
16進制表示法 紅色： background-color: #ff0000; 所有用#開頭的值，都是16進制的。 #ff0000：紅色 16進制表示法，也是兩位兩位看，看r、g、b，但是沒有逗號隔開。 ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。所以等價於rgb(255,0,0); 怎么換算的？我們介紹一下 我們現在看一下10進制中的基本數字（一共10個）: 0、1、2、3、4、5、6、7、8、9 16進制中的基本數字（一共16個）: 0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 16進制對應表： 十進制數 十六進制數 0 0 1 1 2 2 3 3 …… 10 a 11 b 12 c 13 d 14 e 15 f 16 10 17 11 18 12 19 13 …… 43 2b …… 255 ff 十六進制中，13 這個數字表示什么？ 表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。 小練習： 16進制中28等於10進制多少？ 答：2*16+8 = 40。 16進制中的2b等於10進制多少？ 答：2*16+11 = 43。 16進制中的af等於10進制多少？ 答：10 * 16 + 15 = 175 16進制中的ff等於10進制多少？ 答：15*16 + 15 = 255 所以，#ff0000就等於rgb(255,0,0) background-color: #123456; 等價於： background-color: rgb(18,52,86); 所以，任何一種十六進制表示法，都能夠換算成為rgb表示法。也就是說，兩個表示法的顏色數量，一樣。 十六進制可以簡化為3位，所有#aabbcc的形式，能夠簡化為#abc; 比如： background-color:#ff0000; 等價於 background-color:#f00; 比如： background-color:#112233; 等價於 background-color:#123; 只能上面的方法簡化，比如 background-color:#222333; 無法簡化！ 再比如 background-color:#123123; 無法簡化！ 要記住： #000 黑 #fff 白 #f00 紅 #333 灰 #222 深灰 #ccc 淺灰
background-color 屬性表示背景色:
background-img 屬性表示該元素的背景圖片:
那么發現默認的背景圖片，水平方向和垂直方向都平鋪
background-repeat 屬性表示該元素平鋪方式:
屬性值:
| 值 | 描述 |
|---|---|
| repeat | 默認。背景圖像將在垂直方向和水平方向重復。 |
| repeat-x | 背景圖像將在水平方向重復。 |
| repeat-y | 背景圖像將在垂直方向重復。 |
| no-repeat | 背景圖像將僅顯示一次。 |
| inherit | 規定應該從父元素繼承 background-repeat 屬性的設置。 |
給元素設置padding之后，發現padding的區域也會平鋪背景圖片。
repeat應用案例:
還是上面那個超鏈接導航欄的案例，我們給body設置平鋪的圖片，注意：一定找左右對稱的平鋪圖片，才能實現我們要的效果
background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置
屬性值：
| 值 | 描述 |
|---|---|
|
如果您僅規定了一個關鍵詞，那么第二個值將是"center"。 默認值：0 0； 這兩個值必須挨在一起。
|
精靈圖技術:
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分
CSS 雪碧圖應用原理：
只有一張大的合並圖， 每個小圖標節點如何顯示單獨的小圖標呢？
其實就是 截取 大圖一部分顯示，而這部分就是一個小圖標。
使用雪碧圖的好處：
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便
不足：
1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印
我們可以使用background綜合屬性制作通天banner，什么是通天banner呢，就是一般我們電腦的屏幕都是1439.但是設計師給我們的banner圖都會比這個大，
那么我們可以此屬性來制作通天banner。
background: red url('./images/banner.jpg') no-repeat center top;
background-attach
設置fixed之后，該屬性固定背景圖片不隨瀏覽器的滾動而滾動
定位:
定義: 定位有三種：1.相對定位 2.絕對定位 3.固定定位
相對定位:
相對定位:相對於自己原來的位置定位
現象和使用：
1.如果對當前元素僅僅設置了相對定位，那么與標准流的盒子什么區別。
2.設置相對定位之后，我們才可以使用四個方向的屬性： top、bottom、left、right
特性：
1.不脫標
2.形影分離
3.老家留坑（占着茅房不拉屎，惡心人）
所以說相對定位 在頁面中沒有什么太大的作用。影響我們頁面的布局。我們不要使用相對定位來做壓蓋效果
用途：
1.微調元素位置
2.做絕對定位的參考（父相子絕）絕對定位會說到此內容。
參考點：
自己原來的位置做參考點。
絕對定位:
特性：
1.脫標 2.做遮蓋效果，提成了層級。設置絕對定位之后，不區分行內元素和塊級元素，都能設置寬高。
參考點(重點)：
一、單獨一個絕對定位的盒子
1.當我使用top屬性描述的時候 是以頁面的左上角（跟瀏覽器的左上角區分）為參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角為參考點來調整位置。
二、以父輩盒子作為參考點
1.父輩元素設置相對定位，子元素設置絕對定位，那么會以父輩元素左上角為參考點，這個父輩元素不一定是爸爸，它也可以是爺爺，曾爺爺。
2.如果父親設置了定位，那么以父親為參考點。那么如果父親沒有設置定位，那么以父輩元素設置定位的為參考點
3.不僅僅是父相子絕，父絕子絕 ，父固子絕,都是以父輩元素為參考點
注意了：父絕子絕，沒有實戰意義，做站的時候不會出現父絕子絕。因為絕對定位脫離標准流，影響頁面的布局。相反‘父相子絕’在我們頁面布局中，是常用的布局方案。因為父親設置相對定位，不脫離標准流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。
還要注意，絕對定位的盒子無視父輩的padding
作用：頁面布局常見的“父相子絕”，一定要會！！！！
1 *{ 2 padding: 0; 3 margin: 0; 4 } 5 .box{ 6 width: 100%; 7 height: 69px; 8 background: #000; 9 } 10 .box .c{ 11 width: 960px; 12 height: 69px; 13 background-color: pink; 14 /*margin: 0 auto;*/ 15 position: relative; 16 left: 50%; 17 margin-left: -480px; 18 19 /*設置絕對定位之后，margin:0 auto;不起任何作用，如果想讓絕對定位的盒子居中。當做公式記下來 設置子元素絕對定位，然后left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/ 20 }
固定定位:
固定當前的元素不會隨着頁面滾動而滾動
特性:
1.脫標 2.遮蓋，提升層級 3.固定不變
參考點：
設置固定定位，用top描述。那么是以瀏覽器的左上角為參考點
如果用bottom描述，那么是以瀏覽器的左下角為參考點
作用： 1.返回頂部欄 2.固定導航欄 3.小廣告
z-index
這個東西非常簡單，它有四大特性，每個特性你記住了，頁面布局就不會出現找不到盒子的情況。
- z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
- 只有定位了的元素，才能有z-index,也就是說，不管相對定位，絕對定位，固定定位，都可以使用z-index，而浮動元素不能使用z-index
- z-index值沒有單位，就是一個正整數，默認的z-index值為0如果大家都沒有z-index值，或者z-index值一樣，那么誰寫在HTML后面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
- 從父現象：父親慫了，兒子再牛逼也沒用