一，背景顏色

設定background-color:屬性，具體可以有四種方法

1. 具體單詞，例如red
2. rgb：例如rgb(0,255,0)
3. rgba：例如rgba(0,0,255,0.7)
4. 十六進位制：例如#0ff

二，背景圖片

1. 設定background-image: url();的屬性
2. 圖片的地址必須放在url()中, 圖片的地址可以是本地的地址, 也可以是網路的地址
3. 如果圖片的大小沒有標籤的大小大, 那麼會自動在水平和垂直方向平鋪來填充
4. 如果網頁上出現了圖片, 那麼瀏覽器會再次傳送請求獲取圖片

三，背景圖片的平鋪屬性

1. 設定CSS中的background-repeat屬性
2. repeat 預設, 在水平和垂直都需要平鋪
3. no-repeat 在水平和垂直都不需要平鋪
   1. repeat-x 只在水平方向平鋪
   2. repeat-y 只在垂直方向平鋪
4. 可以通過背景圖片的平鋪來降低圖片的大小, 提升網頁的訪問速度

四，背景圖片的定位屬性

1. 設定background-position:屬性，
2. 用法1：接方向background-position: center top;第一個是水平方向，另一個是垂直方向
   1. 水平方向: left center right
   2. 垂直方向: top center bottom
3. 用法2:接數字 background-position: 100px 200px;
   1. 記住一定要寫單位, 也就是一定要寫px
   2. 記住具體的畫素是可以接收負數的
4. 同一個標籤可以同時設定背景顏色和背景圖片, 如果顏色和圖片同時存在, 那麼圖片會覆蓋顏色

五，背景圖片的關聯屬性

1. 設定background-attachment的屬性，例如background-attachment:fixed;
2. scroll 預設值， 會隨著滾動條的滾動而滾動
3. fixed 不會隨著滾動條的滾動而滾動

六，背景圖片和插入圖片的區別

背景圖片
background-image: url(images/girl.jpg);

插入圖片
<img src="images/girl.jpg" alt="">
 

1. 背景圖片僅僅是一個裝飾, 不會佔用位置；插入圖片會佔用位置
2. 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置；插入圖片沒有定位屬性, 所有控制圖片的位置不太方便
3. 插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜尋引擎收錄, 那麼推薦使用插入圖片

七，css精靈圖

1. CSS精靈圖是一種影象合成技術
2. 可以減少請求的次數, 以及可以降低伺服器處理壓力
3. CSS的精靈圖需要配合背景圖片和背景定位來使用

八，行高

1. 行高與盒子高的區別：
   1. 行高指的是每行內容的高度，line-height: 20px;
   2. 盒子高指的是元素的高度，height: 80px;
2. 文字在行高中預設是垂直居中的
3. 一行文字，怎樣垂直居中？設定文字的"行高等於盒子的高"即可
4. 多行文字，怎樣垂直居中？只能通過設定padding來讓文字居中

九，文字內邊距

1. 盒子中儲存的是文字, 那麼一般情況下我們會以盒子左邊的內邊距為基準
2. 右邊如果放不下一個文字, 那麼文字就會換行顯示, 所以文字和內邊距之間的距離就有了誤差
3. 頂部的內邊距並不是邊框到文字頂部的距離, 而是邊框到行高頂部的距離