The position location

  • The static default values
  • Relative, rising, but not out of the document flow
  • Absolute: A reference is the nearest non-static element in an ancestor.
  • Fiexd fixed positioning, the positioning baseline is viewport viewpor, but transform will change, try not to use on mobile phones, there are many bugs.
  • If sticky is located, it will stick to the top of the screen when you slide the screen down. Suitable for navigation.

Create cascading context case, z-index

  • When z-index is not auto, relative Absolute is added. When Z-index is not written in the Container, the small world range is -infinity to + infinity. When z-index is 0, the range is 0 to + infinity.

  • It will be created in Flex

  • Context is created when opacity is not 1.

  • When there is transfotm

  • Flex, index in grid is not auto

    left: 50%; top: 50%; transform:translate(-50%,-50%);

You can put the child element in the center of the parent element.

Browser rendering process

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into one render tree
  4. Layout (document flow, box model, calculated size and location)
  5. Paint (border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

Update the style

  1. JS/CSS > Styles > Layout > Draw > Composition
  2. JS/CSS > Styles > Draw > Composition
  3. JS/CSS > Styles > Composition

How do I know how to update? Use developer tools to try it yourself or visit CSSTriggers.com

transform

  • Translate displacement

    transform: translateX(50px); transform: translate(50px,50px);

  • Scale Scales or enlarges

    The transform: scaleX (1.5);

  • The rotate rotating

transform: rotate(45deg); By default, it rotates around the Z axis

  • Skew tilt

transform: skewX(15deg);

Two ways to animate CSS: Transition and Animation

transition

#demo{
    transition:all 1s ease-in-out 3s;
}
Copy the code

Transition: Attribute names are often delayed in transition mode, used with TranForms.

All can be transitioned to other attributes. Multiple attributes are separated by commas. Not all attributes can be transitioned. Note that display:block>none cannot be transitioned, but visibility:visible>hidden can be transitioned

animation

@keyframes xxx { from { transform:translateX(0%); } to { transform:tanslateX(100%); } } @keyframes xxx { 0% { transform: none; 66.66%} {the transform: translateX (200 px); } 100%{ transform: translateX(200px) translateY(100px); }}Copy the code

Animation tracks can be set in two ways

animation: .5s heart linear infinite alternate-reverse;
Copy the code

In code order, they are animation: duration Animation name transition mode Number direction