框模型、背景、渐变

1、框模型
   1、什么是框模型
      框:html中，所有的元素都可以认为是框。框中可以盛装内容。
      框模型:指的是 框与框、框与内容之间的关系。
      定义了：外边距、内边距、边框


      注意：
           可以通过width  和   height  定义 框 的宽度和高度
  如果  增加了 内边距 外边距 边框 的时候 不会影响内容区域的尺寸，但会增加 框的总尺寸


  元素的实际宽度：左外边距 + 左边框 + 左内边距 + 内容区域(width) + 右内边距 + 右边框 + 右外边距
2、外边距  
   1、什么是外边距
      在元素边框周围的一些空白区域
      该空白区域，正常情况下是不允许有其他元素显示的。
   2、外边距属性
      margin:value;
        表示上下左右四个方向的外边距
      单边设置:
        margin-方向:
 方向：top,bottom,left,right
      取值：px、%、负值、auto
      注意：当元素的 【左右】外边距设置为 【auto】 时，那么该元素会在其父层容器内变的水平居中。
   3、html中，有些元素是具备默认外边距的。
      h1-h6,p,body
      如果设置以上元素的margin属性值的话，那么就会覆盖掉他们默认的margin
   4、垂直外边距的合并
      当两个垂直外边距相遇时，他们将形成一个外边距，以最大值为准。
   5、外边距取值
      margin简易写法:
      margin:value ; value 表示的上下左右四个方向的外边距
      margin:v1 v2 ; v1 表示 上下外边距 ,v2表示左右外边距
             maring:20px auto;
      margin:v1 v2 v3;v1 表示上外边距,v2表示左右外边距,v3表示下外边距
      margin:v1 v2 v3 v4;上 右 下 左
3、内边距
   1、什么是内边距
      框内的内容与框之间的距离控件
      注意：增加内边距后会扩大元素边框所占的区域
   2、语法：
      padding : value;
      取值：像素、%、不能取负值
      padding:v1; 四边
      padding:v1 v2; 上下  左右
      padding:v1 v2 v3; 上 左右 下
      padding:v1 v2 v3 v4;上 右 下 左


      padding-方向:
      padding-left :
      padding-right:
      padding-top:
      padding-bottom:
4、背景
   1、背景色
   2、背景图像
      属性：background-image
      取值：url(图像路径)
      background-image:url(images/1.jpg);
      background-image:url("images/1.jpg");
      background-image:url('images/1.jpg');
   3、背景重复(repeat)(重点)
      属性:background-repeat
      取值:
repeat : 垂直、水平  双方向重复，默认值
repeat-x:水平方向重复
repeat-y:垂直方向重复
no-repeat:不重复
   4、背景图片尺寸(非重点)
      属性:background-size
      取值:
          value1 value : 背景图的宽度 和 高度
 value1% value2% : 百分比
 cover:覆盖,所有的边都已经覆盖到元素的边缘时才停止缩放。有可能图片显示不完整。
 contain:包含,只要有一条边覆盖到元素的边缘上就停止缩放。图片一定会完整的显示在背景中，有可能不会覆盖到所有的区域。
   5、背景图像固定(非重点)
      属性：background-attachment
      取值：
          scroll : 默认， 不固定
 fixed : 背景图固定
   6、背景定位(重点)
      指的是背景图在元素中的位置
      属性：background-position
      取值：
           x y : x水平偏移位置 y垂直偏移位置
        x 为正 则向右移动
x 为负 则向左移动
y 为正 则向下移动
y 为负 则向上移动
  x% y% : 相对于所在的元素的宽度 和 高度来设置 相对比例
          多数用于背景图像居中显示
  left
  right
  center
  top
  bottom
   7、背景裁剪 - 背景绘制区域(非重点)
      属性：background-clip
      取值：
            border-box : 默认值，背景被保留(裁剪)到边框上
   padding-box : 背景被保留到内边距上,不包括边框
   content-box : 背景被保留到内容区域上，不包括边框和padding
   8、背景的定位区域(非重点)
      背景从哪开始画?
      属性：background-origin
      取值：
   border-box : 从边框开始画
   padding-box : 从内边距上开始画
   content-box : 从内容区域上开始画
   9、背景属性
      背景的综合属性
      background:color url(图像路径) repeat attachment position;
      常用用法：
         1、background:#f00;
2、background:url() no-repeat -112px -238px;
5、渐变
   1、什么是渐变
      在多种颜色之间进行柔和的过渡
   2、语法
      属性:background-image:
      取值: 
           linear-gradient(值,值...)  --> 线性渐变
  radial-gradient(值,值...)  --> 径向渐变
  repeating-linear-gradient() --> 重复线性渐变
  repeating-radial-gradient() --> 重复径向渐变
      1、线性渐变(重点)
         linear-gradient();
background-image:linear-gradient();
linear-gradient(angle,color-point,color-point,.....);
  angle:渐变的方向 或 角度
        方向值：
   to top : 向上
   to bottom : 向下
   to left : 向左
   to right : 向右
角度:
   0deg
   90deg
   178deg
   color-point : 表示颜色的起始点、各个过渡点、结束点
                 颜色  位置组合
   color-point : red 0%
                 blue 50%


 从上向下 ， 实现  红色 0%  到  绿色(50%) 到 蓝色(100%)渐变
 background-image:linear-gradient(to bottom,red 0%,green 50%,blue 100%);


    2、径向渐变
       radial-gradient([size at position],color-point,color-point....);
          size : 圆的半径
 position : 圆心出现的位置，默认为元素的中心
    3、重复线性渐变
       repeating-linear-gradient(angle,color-point);
       color-point : red 0px;
       repeating-linear-gradient(to bottom,red 0px,green 10px,blue 20px); 
    4、渐变是新特性
       所以会有浏览器的兼容性
       对不支持的浏览器版本:
         通过浏览器前缀，去匹配不同的浏览器
Firefox : 火狐 -moz-
Chrome、Safari : -webkit-
Opera :欧鹏 -o-
       #div1{
background-image:linear-gradient(....);
background-image:-moz-linear-gradient(....);
background-image:-webkit-linear-gradient(....);
background-image:-o-linear-gradient(....);
       }