1.內邊距
1. 什麼是內邊距：
內容區域與邊框之間的距離
特點：會擴大元素邊框所佔用的區域。
2. 語法：
padding：value；
單邊設置：
padding-top/right/bottom/left:value;
取值：
1. 單位可以爲：px
2. 單位可以爲：%
3. 簡潔寫法：
padding:value；四個方向的內邊距
padding：v1 v2; v1上下 v2左右
padding：v1 v2 v3;上 左右 下
padding：v1 v2 v3 v4;上 右 下 左
4. 特殊處理：
對行內元素和行內塊元素設置內邊距（上下）時，
只會影響自己，並不會影響到其他元素；
命令顯示圖：
網頁示例圖：
2. box-sizing
作用：
重新指定元素框模型的計算模式
元素邊框內佔地區域=左右邊框+左右內邊距
+width
1. content-box：
默認值，採用默認計算模式即內邊距以及邊框會 累加到元素的尺寸中。
2. border-Box：
元素的尺寸 會包含邊框和內邊距 。
3. 背景屬性
1. 背景顏色，背景圖像
2. 背景顏色：
屬性： background-color
取值： 任意合法顏色 或 transparent
注意： 背景顏色會填充到元素的內容區域、內邊距區域以及邊框區域
3. 背景圖像：
作用：以圖像作爲元素的背景
屬性： background-image
取值：url（背景圖像路徑）
4. 背景重複：
屬性： background-repeat
取值：
1. repeat
默認值，水平垂直方向都平鋪
2. repeat-x
僅在水平方向平鋪
3. repeat-y
僅在垂直方向平鋪
4. no-repeat
不平鋪
5. 背景圖片尺寸：
屬性：background-size
取值：
1. value1 value2
制定背景圖像的寬度和高度，px爲單位
2. value1% value2%
採用當前元素的寬和高的百分比作爲背景圖像大小
3. cover
覆蓋
將背景圖等比放大，知道背景圖完全覆蓋到元素的所有區域爲止
4. contain
包含
將背景圖等比放大，直到背景圖像的下邊或右邊有一個邊緣碰到元素爲止
6. 背景圖片固定：
屬性： background-attachment
取值：
1. scroll
滾動，默認值，背景圖會隨着文檔而滾動
2. fixed
固定，背景圖不會隨着頁面文檔而發生滾動，一直保持在可視化區域中的
固定位置處
7. 背景圖片定位：
作用：改變背景圖像在元素中的默認位置
屬性：background-position
取值：
1. x y
x：背景圖水平偏移距離，取值爲正，
向右偏移，取值爲負，向左偏移
2. x% y%
0% 0%:背景圖在元素左上角
100% 100% ： 背景圖在元素右下角
50% 50%： 背景圖在元素的中間
3. 關鍵字
x: left / center / right
y : top / center / bottom
background-position:center;/*水平和垂直都在中間位置處*/
background-position：left top;/*背景圖在左上方 */
background-position：top right；/*背景圖在右上方*/
命令顯示圖：
網頁示例圖：
8. CSS Sprites：（ 雪碧圖，精靈圖）
作用：
將一些小的的背景圖，合併到大的背景當中去，
以便實現減少服務器端的請求次數
步驟：
1. 根據要看的圖像大小，創建一個元素
2. 將"雪碧圖"作爲元素的背景圖，再通過背景
圖像位置實線位置偏移，將用戶要看的圖像，
顯示在元素中。
**在ps中的快捷鍵：**
Ctrl + ‘+’：放大圖像
Ctrl + ‘-’：縮小圖像
Ctrl + ‘D’：取消選區（虛線框）
9. 背景屬性：
屬性： background
取值： color url（） repeat attachment
position；
注意： 如果不設置其中的某個值，將採用默認值。
