CSS中的内边距、box-sizing与背景颜色

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