5.6笔记

 /* 限制图片显示的区域,可选值content-box,padding-box,border-box(默认值) */

      /* background-clip: content-box; */

      /* 设置图片的左上角在哪个点 可选值content-box, padding-box(默认值), border-box */

      background-origin: border-box;

 /* css3新增的样式值,图片会跟着滚动的内容一起移动 */

      /* background-attachment: local; */

      /* 相对于div的视口 */

      /* background-attachment: sroll; */

      /* 相对于网页的视口 */

      /* background-attachment: fixed; *

 /* :nth-child(3) => 第三个子元素 */

    /* 是li并且是第三个子元素 */

    li:nth-child(2)

    /* 同辈li元素中的第三个li */

    li:nth-of-type(3)

  /* 奇数 */

    /* li:nth-child(2n - 1){

      background-color: green;

    } */

    /* li:nth-child(even){

      background-color: red;

    } */

    /* li:nth-child(odd){

      background-color: green;

    }

 /* 第一个 */

    /* li:nth-child(1) { */

    li:first-child {

      background-color: red;

    }

    /* 最后一个子元素并且是li */

    /* li:nth-last-child(1) { */

    li:last-child{

      /* background-color: green; */

    }

    /* li:nth-of-type(1) { */

    li:first-of-type {

      /* background-color: red; */

    }

    /* 最后一个li */

    /* li:nth-last-of-type(1) { */

    li:last-of-type {

      /* background-color: green; */

    }

    /* 唯一的子元素,并且是li */

    /* li:only-child{} */

    /* 唯一的li */

    li:only-of-type

* 是div,并且是锚点跳转的目标 */

    div:target

/* 第一个字符 */

    /* div:first-letter{

      color: red;

      font-size: 50px;

    } */

    /* 第一行 */

    /* div:first-line{

      color: red;

      font-size: 50px;

    } */

    /* 伪元素,修改反选的样式 */

    div::selection

/* 伪元素默认是行内元素,要设宽高,只能设置位块级元素 *

  /* 伪元素的内容.没有内容也要设置content.没有,伪元素无法显示

  <!-- 伪元素 => 不是css3的概念 => 常见的是::after和::before -->

  <!-- 伪元素 => 用来代替标签的样式 -->

  <!-- ::after => 出现在父元素的底部 -->

  <!-- ::before => 出现在父元素的顶部 -->

  <!-- 标签的作用是添加语义,而不是添加样式,所以,如果一个标签插入的时候,只是位了添加样式,理论上就可以用伪元素来代替 -->

<!-- 清浮动 -->

  <!-- 01: 父元素也浮动 (整个页面都浮动) -->

  <!-- 02: overflow:hidden (没有滚动条) -->

  <!-- 03: 额外标签法 (莫名奇妙多了一个p标签)  -->

  <!-- 04: 用伪元素来实现清浮动 -->

  inset => 内阴影

      5px => 水平偏移

      10px => 垂直偏移

      20px => 阴影大小

      30px => 阴影的扩展大小

      #000 => 阴影颜色

box-shadow: 5px 10px 20px 30px #000

 /* all => 所有样式变化都产生过渡效果 */

      /* transition: all 2000ms; */

      /* width变化才产生过渡效果 */

      /* transition: width 2000ms; */

      /* 3s => 延迟时间 */

      /* transition: all 2000ms 3s; */

      /* linear => 匀速运动 默认是缓冲效果 */

      /* transition: all 2000ms 3s linear; */

      /* 动画队列 */

      /* transition: width 2000ms, height 2000ms 2s, background-color 2000ms 4s; */

      /* 4个单一样式 */

      transition-property: width;

      transition-duration: 2000ms;

      transition-delay: 2s;

      transition-timing-function: linear;

  <!-- 过渡 => 样式变化的过程中,有一个过渡时间,形成动画. -->

  <!-- 设置了过渡之后,但凡有样式发生了变化,都会产生过渡 -

 /* 样式从200px变到500px， 过渡时间2s，持续无数次 */

      animation: move 2s infinite;

    }

    @keyframes move{

      /* 结束样式 */

      to{

        width: 500px;

      }

      /* 开始样式 */

      from {

        width: 200px;

      }

    }