1. Where to search exercise elements :PSD Web 2. Margin merge

  • Which situations will merge: parent-child margin merge, brother margin merge
  • How to prevent merging: padding, border blocking; Overflow: hidden; Display: Scroll down

3. Basic Unit:

  • Length: PX, em, percentage, integer, REM, VM, and vH
  • Color: hexadecimal (eg. #FF6600), RBGA color (eg.rgb (0,0,0,0,1) or rgba (0,0,0,1)), HSL color (eg.hsl (360,100%,100%))

4. CSS layout

  • Float layout
  • Flex layout

    (1) Remember these codes: 
    display: flex;
flex-direction: row/column;
flex-wrap: wrap;
justify-content: center/space-between;
align-items: center;
Copy the code

(2) Note: Do not overwrite width and height unless otherwise specified; use min-width, max-width, min-height, max-height; Flex basically meets your needs; Flex and margin-XXX: Auto have unexpected effects

  • The grid layout
containerP{
    grid-template-column: 40px 50px auto 50px 40px;
    grid-template-row: 25% 100px auto;
}
Copy the code

Grid-template-area is useful, especially for irregular layouts.

5. The CSS positioning

  • Background < border < block-level element < float element < inline element < position element
  • Position: static, relative, Absolute, fixed, sticky

    (1)position:static; The default value

    (2) position:relative

    Father absolute element with z-index;

    (3)position: absolute

    Move away from the original position and create another layer, such as the close button of the dialog box, with z-Index

    (4)position: fix

    Positioning relative to the viewport

6. Cascading context

  • Each cascading context is a new small world (scope) in which the Z-index has nothing to do with the outside world. Only z-indexes in the same world can be compared.
  • Non-orthogonal properties create cascading contexts: remember z-index, flex, opacity, transform

7. The CSS animations

  • It is common to use JS update styles, for example
div.calssList.add('red')
div.remove()
Copy the code
  • The CSS rendering process includes layout, drawing, and composition in turn. Layout and drawing can be omitted
  • CSS animation optimization: JS optimization: Use requestAnimationFrame instead of setTimeout or setInterval CSS and functionality optimization: Use will-change or Translate
  • Transform: four common functions: translate, scale, rotate, skew Experience: Usually with the transition is excessive; Inline elements do not support a transform and need to become a block first. A common code for absolutely centering elements:
left:50%;top:50%;transform: translate (-50%, -50%)Copy the code
  • Transition: A transition frame

    Grammar:Transition: attribute name, duration, transition mode, delay

    transition:left 200ms linear

    You can separate two different attributes eg with commas. transition:left 200ms, top 400ms

    You can use all to represent all attributes, eg.transition:all 200ms

    There are transition modesLinear, ease, ease-in, ease-out, ease-in-out, cubic-bazier, step-start, step-end, steps

    Matters needing attentiondisplay:none => blockCan’t transition, usually change toVisibility: hidden => visible
  • @keyframe syntax (1)from to, for example:
@keyframes slidein{
    from{
        transform:translateX(0%);
    }
    to{
        transform: translateX(100%)}}Copy the code

(2) percentage, e.g.

@keyframes identifier{
    0% { top:0; left: 0; }30% { top: 50px; }68%.72% { left:50px; }100% { top:100px;left:100%;}
}
Copy the code
  • Animation abbreviation syntax: animation: Length direction number delay | | | | | transition way whether filling | | suspended animation name (1) length: 1 s or 1000 ms (2) the transition way: just like the transition values, such as linear (3) times: 3 or 2.4 or infinite (4) : Reverse | alternate | alternate – reverse filling way (5) : none | recently | backwards | to both (6) whether to suspend: paused | running above all attributes are attributes separately