夜灵的Html笔记Day09——定位、渐变

23.重点（***）
    1.相对定位
    2.绝对定位
    3.固定定位
  
   1.定位
      语法：position
      取值：
         1.static   默认值
2.relative  相对定位
3.absolute  绝对定位
4.fixed     固定定位
          
     **:如果元素设置为 相对定位，绝对定位，固定定位的话，则被称之为“已定位元素”
    2.偏移属性
       作用：
         ******: 对已定位属性实现位置的移动
       属性：
         top       以上边为基准边改变元素位置  
right      以右边。。。
bottom     以下边
left       以左边。。。。
       取值：
          以px为单位的值


   3.
     堆叠顺序 
        已定位的元素允许出现堆叠效果的，可以通过z-index改变堆叠的顺序
(尤其绝对定位)
       语法：z-index
       取值：数字 （无单位）
          (数越大，越靠上)
     **:
         父子关系元素是不受堆叠顺序影响，永远都是子压父上
   4.
    定位----相对定位
      1.什么是？
          元素会相对于它原来的位置偏移某个距离 
      2.语法：position
        取值：relative
**:配合偏移属性 完成位置的移动 (top,left)
        
      使用场合：
         1.位置微调时
2.配合 绝对定位 元素实现位置偏移
      **：
         相对定位元素 原来的位置会被保留，不能被其它元素所占据
    5.
      定位---绝对定位
        1.什么是？
  1. 绝对定位元素会脱离文档流---不占据页面空间
  2.绝对定位的元素会相对于 离它最近的 已定位的 元素去实现位置初始化
  3.配合 偏移属性 实现位置的移动
  4.如果绝对定位元素 没有 已定位的祖先元素，那它的位置相对于最初(body,html)实现初始化
        2.语法：
  position
  取值：
     absolute
  **:配合偏移属性 完成位置的移动
使用场合：
  1.弹出框
特点：
    1，脱离文档流
    2.绝对定位元素会变成块级元素
    3.绝对定位元素在正常情况下，margin:auto会失效，其它正常
    4.非正常情况，auto会生效
      （绝对定位元素 top,right,bottom,left同时为0）,auto会生效
  （居中效果？？？？）
     6.固定定位
        语法：position
取值： fixed
**：配合偏移属性 实现位置的微调


特点：
 固定定位永远都是相对于body实现定位的
 脱离文档流
 会变成块级元素


pm:


1.渐变
    1.什么是？
        两种或多种颜色平缓过渡的效果
    2.元素
       色标：指定每个颜色的值及出现的位置
    3.分类
        1.线性渐变
    以直线的方式填充渐变颜色 
2.径向渐变
    以圆形的方式填充渐变颜色
3.重复线性渐变
4.重复径向渐变
    4.语法：
        background-image
      取值：
       1.线性渐变 
          linear-gradient(angle,color-point1,color-point2,color-point3);


 1.angle关键字
    to top:   从下向上填充渐变色
              第一个色标在最底下
      最后一个色标在最上面
    to right:  从左向右填充渐变色
               第一个色标在最左边
最后一个色标在最右边
    to bottom:   从上向下填充渐变 色
    to left:    从右向左填充渐变色
   
   具体角度值：
      0deg~360deg
 2.color-point
    色标：包含颜色及其出现的位置
    eg:
        1.red 0%
     从开始的位置显示为红色
2.blue 50%
     从中间位置显示为蓝色
3.yellow 200px
4.green
      省略位置，由浏览器自动计算
        
2.径向渐变
  语法：background-image
           取值：
     radial-gradient([size at position],color-point1,color-point2);


             1.size at position
       size:半径大小，以px或%为单位
at:不能省略
position:  圆心所在位置
3.重复线性渐变
   background-image:repeating-linear-gradient(angle,color-point);
            
   eg:
     background-image:repeating-linear-gradient(to top,red 0%,blue 10%);
4.重复径向渐变
   bakcground-image:repeating-radial-gradient([size at position],color-point1);