css 小总结

187 阅读3分钟

先区分内敛标签、块级标签、内联块级标签

块级标签特点:

1、使元素变成块元素,元素独自占一行,在不设置自己的宽度的时候 ,默认占满父元素的宽度。
2、能够改变元素的height,width的值。
3、可以设置padding,margin的各个属性值,top,left,bottom,right都能够产生边距效果。

内敛标签的特点:

1、使元素变成内联元素,元素横向排列,没有宽度和高度,宽度和高度为自己包裹内容的大小。 2、不能够改变元素的height,weight的值。
3、可以设置padding的垂直方向属性值,和margin的水平方向的属性值。

内敛块级标签的特点:

1、使元素变成内联元素,元素独自占一行。
2、能够改变元素的height,width的值。
3、可以设置padding,margin的各个属性值,top,left,bottom,right都能产生边距效果。

几种可以水平居中的方式

1、子元素为内联元素,从父元素上居中 ;先看父元素是不是块级元素,如果是直接在父元素上添加:text-align:center 如果父元素不是块级元素先转换为块级元素,然后再添加:text-align:center。
2、子元素为块级元素,分为定宽度和不定宽度:当宽度给定的情况下,可从自己居中;margin:{0 auto;}当子元素的默认宽度和父元素一样时,我们可以把子元素转换成为内联元素,然后转换成1的做法。
3、使用flex布局,这种布局不需要考虑宽度,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

几种可以垂直居中的方式

1、要居中的子元素为单行的内联元素,可以让他的行高等于他的高度就可以了。
2、要居中的子元素为多行的内联元素时,可以在他的父元素上设置display:table,子元素上设置display:table-cell;和vertical-align:middle
3、要居中的子元素为块级元素时,可以使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

小特效

1.摇动

css部分
    .zwyShake {
      background-color: red;
      width: 40px;
      height: 40px;
      transform-origin: center bottom;
      animation: zwyShake 2s 0.5s ease-out infinite;
    }
    @keyframes zwyShake {
      0% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      }

      10% {
        transform: rotate(-12deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      }

      20% {
        transform: rotate(12deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      }

      28% {
        transform: rotate(-10deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      }

      36% {
        transform: rotate(10deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      42% {
        transform: rotate(-8deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      48% {
        transform: rotate(8deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      52% {
        transform: rotate(-4deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      56% {
        transform: rotate(4deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      60% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.755, .5, .855, .06);
      }

      100% {
        transform: rotate(0deg);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
      }
    }

2.闪烁

@keyframes zwyHover1 {
    0% {
      transform: scale(1);
    }

    50% {
      transform: scale(0.8);
    }

    100% {
      transform: scale(1);
    }
  }

  .zwyHover1 {
    display: flex;
    --count: infinite;
    width: 60px;
    height: 30px;
    background-color: blue;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 50%;
    animation: zwyHover1 .3s var(--count);
  }

3、鼠标放入旋转

   .img img {
   transition: all 0.5s ease-out;
   opacity: 1;
 }

 .img img:hover {
   transform: rotate(720deg) scale(0);
   opacity: 0;
 }

效果图