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；
注意： 如果不设置其中的某个值，将采用默认值。
