フロントエンド面接問題——css

1、cssセレクタ:

    1、     
    2、class   
    3、id   
    4、     :  a[href="baidu.com"]{}
    5、     ： :hover{}
    6、      ，   ::before{}
    7、*    
            7            ：
    8、      div p ，p   div       
    9、     div>p ，p       div
    10、      div+p

2、css優先度：

     ：
     > ID     >      =       =       >       =       

      !important           。!important >     
      !important       

優先度は必ず重みを尋ねます.セレクタの重みは簡単な累積ではありません.

      ，        4   ：
        ：       ，  style=""，    1000；
        ：   ID   ，  #id="",     100；
        ：   calss |    |       ，  .class | :hover,:link,:target | [type],    10；
        ：      |        ，  p | ::after, ::before, ::fist-inline, ::selection,    1；
      ，     （*），    （>），        （+）      4    ，          0；
  
css     ：
    1.         ，      ，       ，    ；
    2.      ，          （       ）；
    3.css      !important  ，       （         ）；

参照先:https://www.runoob.com/w3cnote/css-style-priority.html
min-width、max-width、min-height、max-heightと!importantが衝突したとき、前の4人が兄貴だった.minとmaxが衝突したとき、minこそ長兄だった.

3、position位置決め?

static、absolut、relative、fixed、sticky

1、relative、absoluteはどの位置に対して:

relative：  relative       ，relative         ，             

absolute：    static                。 
       position     ：absolute fixed relative sticky inherit(ie      )
  ，           relative 

2、fixedの位置付け:

             （html）

4、animationは最後のフレームに止まります。

animation-fill-mode:forwards;

animation-fill-mode   : none(  ) | forwards | backwards | both;