CSS day05

一、定位（相对定位，绝对定位，固定定位）
  1.定位相关属性
    1.定位属性
      属性：position
      取值：
          (1)static 静态，默认值
    (2)relative 相对定位
    (3)absolute 绝对定位
    (4)fixed 固定定位
     注意：将元素的position设置为relative/absolute/fixed任何一个值，那该元素就称为“已定位”元素。
    2.偏移属性
      top/bottom/left/right
      以上四个属性取值均为数字(px单位)
      ex:
        top:150px;  元素向下偏移
    bottom:-200px;  元素向下偏移
    left:100px;  元素向右偏移
      注意：只有“已定位”元素才能使用偏移属性
    3.详解
      1.相对定位
        1.什么是相对定位
      元素会相对于它原来的位置偏移某个距离
    2.使用场合
      在做元素位置的微调时使用
    3.语法
      position:relative;
      配合着偏移属性使用
      2.绝对定位
        1.特点
      1.绝对定位的元素会脱离文档流，不占页面空间
      2.绝对定位的元素会相对于离他 最近的 已定位的 祖先元素 去实现位置的初始化，如果没有已定位的祖先元素，
        那么元素相对于body去实现位置的初始化
        (一般子元素要实现绝对定位，父元素通常都设置为相对定位)
    2.语法
      position:absolute;
      配合偏移属性来使用
    3.使用场合
      1.弹出菜单
      2.有堆叠效果的元素
    4.注意
      1.脱离文档流
      2.绝对定位会将元素变为块级元素

   
      3.堆叠顺序
    一旦将元素变为已定位元素的话，元素们有可能会出现堆叠的效果。如果想要改变默认的堆叠顺序，可以使用z-index
    属性：z-index
    取值：无单位的数字，数字越大越靠上
    注意：①父子元素间，z-index无效，永远都是子元素压在父元素上
          ②只有已定位的元素才能使用z-index
     4.固定定位
        1.什么是固定定位
      将元素固定在页面的某个位置，位置不会随着滚动条而发生位置的变化，始终固定在可视化的区域中。
    2.语法
      position:fixed;
      配合偏移属性来使用。
    3.注意：
       1.固定定位脱离文档流，不占页面空间
       2.固定定位的元素会变成块级，允许修改尺寸
       3.固定定位的元素永远都是相对于body去实现位置的初始化

CSS3高级===============================================================================================
二、复杂选择器
  1.兄弟选择器
    兄弟元素：具备相同父元素的平级元素之间称为兄弟元素
    1.相邻兄弟选择器
      作用：获取紧紧挨在某元素后的兄弟元素
      语法：选择器1+选择器2{}
      注意：兄弟选择器，只能向后找，不能向前找。
    2.通用兄弟选择器
      作用：获取某元素后所有满足条件的兄弟元素
      语法：选择器1~选择器2{}
  2.属性选择器
   id,class,style,title,name,type,value等
    1.作用
      允许通过元素所附带的属性及值来匹配元素
    2.语法
      (1)基本写法：
        [attr] attr:属性
    作用：匹配页面中所有附带attr属性的元素
    ex:
      [id] 匹配页面中所有附带id属性的元素
      [class] 匹配页面中所有附带class属性的元素
      (2)elem[attr]
        elem:表示任意元素
    attr:表示任意属性
    作用：匹配页面中所有附带attr属性的elem元素
    ex:
      div[id] 匹配带有id属性的div元素
      (3)[attr1][attr2]......
        作用：匹配同时附带多个属性的元素
    ex:
      [id][class] 匹配同时附带id属性的元素
      (4)[attr=value]
        作用：匹配页面中attr属性值为value的元素
    [attr~=value]:获取属性值以指定值开头的每个元素
    [attr^=value]:匹配属性值以指定值开头的每个元素
    [attr$=value]:匹配属性值以指定值结尾的每个元素
    [attr*=value]:匹配属性值中包含指定值的每个元素
    ex:
      [id="one"]{color:red;}
      等同于
      #one{color:red;}

  3.伪类选择器
    已经学过的伪类：
      链接伪类：  :link
                  :visited
      动态伪类：  :hover
                  :active
          :focus
     1.目标伪类
       作用：突出显示活动的HTML锚点元素，匹配

     2.结构伪类
       作用：通过元素的结构关系来匹配元素（上下级嵌套）
       1.:first-child
         匹配的元素是属于其父元素中的第一个子元素
     <div>
       <p>111</p>
       <p>222</p>
       <p>333</p>
     </div>
     p:first-child{...}

       2.:last-child
         匹配的元素是属于其父元素中的最后一个子元素
     p:last-child{...}
    
       3.:nth-child(){...}
     匹配的元素是属于其父元素中的第n个元素

       4.:empty
         匹配没有子元素的元素