1. CSS selector priority
  • inline
  • The ID selector
  • Class selectors
  • Label selector
  • The link and @ import
    • Link belongs to the XHTML tag, and @import is provided by CSS
    • Link is loaded as the page is loaded, and @import is loaded after the page is loaded
    • @import can be identified only after IE5. Link is an XHTML tag incompatibility problem
    • Link has a higher weight than @import
    • Using JS to control dom changes can only be done in link mode, @import is not dom controlled
  • CSS hides elements
    • opacity: 0
    • visibility: hidden
    • overflow: hidden
    • display: none
    • z-index: -9999
    • transform: scale(0, 0)
  • em/px/rem
    • Em: relative unit. The reference point is the font size of the parent node. If the font size is defined by itself (the default font is 16px), 1em is not a fixed value for the entire page
    • Px: absolute units, pages are rewarded by exact pixels
    • Rem: measured in units relative to the font size of the root node’S HTML
  • Block-level elements are horizontally centered
    • margin: 0 auto 

      .center {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}Copy the code

    • Flex layout 

      .center {
  display: flex;
  justify-content: center;
}Copy the code

    • The table method 

      .center {
  display: table;
  margin: 0 auto;
}Copy the code

  • CSS Positioning
    • static
    • relative
    • absolute
    • fixed
    • sticky
  • z-index
    • Controls the vertical stacking order of overlapping elements
    • The default element’s Z-INDE value is 0
    • Z-index affects only elements with a position value
  • Cascading context
    • The three-dimensional concept of HTML elements
    • The Z-axis extension of HTML elements relative to Windows or web users
    • HTML elements take up space in the cascading context in order of priority based on their own attributes
    • The trigger condition
      • Root element (HTML)
      • The value of z-index is not the absolute or relative positioning of Auto
      • A z – the index values are not for auto flex project (flex item), i.e., the parent element display: flex | inline – flex
      • An element with a value less than 1 on opacity
      • An element whose transform property value is not None
      • Elements whose mix-blending-mode attribute value is not normal
      • Filter Elements whose value is not None
      • Elements whose perspective value is not “None”
      • The Isolation property is set to the element of the ISOLATE
      • position: fixed
      • Arbitrary CSS properties are specified in will-change
  • Floating clearance
    • Clearfix method: Extract the above functionality into the. Clearfix class
    • Overflow: auto or overflow: hidden
  • css-sprites
    • Reduce the number of HTTP requests that load multiple images
    • Resources can be loaded in advance
    • High maintenance costs
    • Similar optimizations can be achieved with HTTP2 multiplexing
  • Media queries
    • Used in the link element 

      <link rel="stylesheet" media="(max-width: 800px)" href="example.css"></link>Copy the code

    • Used in style sheets 

      @media (max-width: 800px) { .test { display: none; }}Copy the code

  • The box model
    • Content
    • Padding (inside margin)
    • Border = border
    • Margin
  • Standard box model and weird box model
    • Box-sizing: content-box
    • Box-sizing: border-box
  • BFC(Block Formatting Context)
    • A separate area that isolates the elements inside the BFC from the elements outside
    • The trigger condition
      • The root element, the HTML element
      • position: fixed/absolute
      • Float to none
      • The overflow is not visible
      • The display value is inline-block, table-cell, and table-caption
  • Advantages of translate for changing position
    • Repositioning in a way that triggers relayout, which triggers redrawing and composition; Translate does not trigger a relayout or redraw of the browser, only composition
    • The transform only applies to the GPU, changing the positioning method will use the CPU
  • Pseudo classes and pseudo elements
    • Pseudo-classes: prefixed with a colon (:) and added to the end of a selector, primarily to control style in a particular state
    • Pseudo-elements: Used to create elements that are not in the document tree and add styles to them, such as ::before
  • flex
    • It is convenient for responsive interface layout
    • Developers simply declare how the layout should behave, not how it should be implemented, and the browser is responsible for the actual layout
    • When the layout involves scenarios of varying widths and distribution alignment, the elastic box layout is preferred
  • CSS animations and transitions
    • Animation and Transition are similar in that they change the value of an element’s properties over time
    • Animation does not need an event to trigger, and Transition does
    • Transition has only one set of keyframes, and animation can set multiple keyframes


    The resources

    1. www.cxymsg.com/guide/

    Wechat public account “Front-end things”