Div stratified

Postion :static (default has no effect)

The default value stays in the document stream and has no effect

Postion :sticky (mostly incompatible)

After moving to, it becomes Fixed

position:relative

Usage scenarios

  • Used for displacement (rarely used)
  • Father absolute

Cooperate with z – index

  • Z-index: default value of auto. No new cascading context is created
  • z-index:-1/0/1/2

position:absolute

Usage scenarios

  • Move away from the original position and create another layer, such as the close button of a dialog box
  • Mouse button prompt

Coordinate z-index experience

  • A position that is not static relative to an ancestor element is not relative only
  • Some browsers will mess up if they don’t write top/left positions
  • Use left: 100%
  • Use the left: 50%; +transform:tranlatex(-50%)

Position: Fixed Position of the viewport

Usage scenarios

  • Annoying ads
  • Back to top button

Cooperate with z – index

  • Try not to use this attribute on mobile phones, there are many pits
  • Search [mobile terminal fixed]

Cascading context

Z-index :10 is not necessarily higher than z-index:5

  • Each cascading context is a scope
  • The z-index in the scope is independent of the outside world
  • Ability comparison within scope

What non-orthogonal attributes can create it

  • The MDN document is written
  • To remember with z – index: 0 / flex/opacity/transform
  1. Document root element ();
  2. Elements whose position is absolute or relative and whose Z-index is not auto;
  3. Elements whose position is fixed or sticky (sticky is suitable for all mobile browsers, but not for older desktop browsers);
  4. Child of flex (flexbox), and z-index is not auto;
  5. Grid (grid) container, and z-index is not auto;
  6. Any element with a value less than 1 (see the specification for opacity);

Clear timer

var id = setInterval(() = > {
    if( n <= 200 ){
        demo.style.left = n +'px'   
        n = n+1
}else{
    clearInterval(id)
}
},1000/60)
Copy the code

Flashing light -> Paint Flashing light

Browser rendering process

steps

  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 (to draw border colors, text colors, shadows, etc.)
  6. Compose (display screen according to cascade relationship)

Three update modes

  1. The first option is all go
  • Div.remove () will trigger the current hour and other elements relayout
  1. Second, skip layout
  • Change the background color to repaint+ Composite
  1. Third, skip Layout and Paint
  • Change transform, just composite

View the updating mode of CSS properties

csstriggers.com/

CSS Animation optimization

JS optimization

  • Use requestAnimatuibFrame instead of setTimeout or setInterval

CSS optimization

  • Use will-change or translate
  • 🥬🐔 Use left to translate

Refer to the article

  • Developers.google.com/web/fundame…

The transform deformation

Four common functions

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew

experience

  • You usually need to coordinate the transition
  • An inline element does not support a transform; it becomes a block first

The transform of the translate

Commonly used to write

  • translateX()
  • translateY()
  • TranslateZ () and parent container Perspective
  • translate(x,y)
  • translate3d(x,y,z)

Experience – Absolutely center the element

left:50%
top:50%
transform:translate(-50%,-50%)
Copy the code

Scale of transform

Commonly used to write

  • scaleX()
  • scaleY()
  • scale(x,y)

experience

  • Use it sparingly, because it tends to blur

Transform rotate rotate

Commonly used to write

  • rotate([|]) 45deg
  • rotateZ([|])
  • rotateX([|])
  • rotateY([|])
  • The rotate3d too complicated

experience

  • Generally used for 360 degree rotation loading
  • Rotate MDN to view documents

Skew of transform

Commonly used to write

  • skewX(| )
  • skewY(| )
  • skew(x,y)

experience

  • They use less

# transform multiple effects

Use a combination of

  • The transform: scale (0.5) translate (100%, 100%)
  • Transform: None Cancel all

The transition transition

role

  • Supplementary intermediate frame

grammar

  • Transition: Indicates the delay of the transition mode
  • transition:left 2s linear
  • You can separate two different attributes with commas
  • You can use all to represent all attributes
  • transition:all 2s
  • Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps, specific meaning depends on mathematical knowledge

Pay attention to

  • Not all attributes can transition
  • Display: None => Block cannot transition
  • Visibility :hidden =>visible
  • Display and visibility Display does not occupy the original position
  • Background can be transitioned
  • Opacity can be used for transitions and is generally not used
  • Transitions must start with one animation, or two, such as transitions between hover and non-hover states

animation

  1. Declare keyframes
  2. Add animation
#demo.start{
    animation: xxx 1.5 s ease 1s infinite alternate forwards 
}
/* From /to = 0%/100%*/
@keyframes xxx{
    0%{
        transform:none;
    }
66.55%{
    transform:translateX(200px);
}
100%{
    transform:translateX(200px),translateY(100px); }}Copy the code

# # abbreviated syntax animation: time delay | | | transition way times | | direction whether filling | | suspended animation

  • Duration: S or ms
  • Transition mode: The value is the same as transition, such as Linear
  • Times :3 or 2.4 or infinite
  • Direction: reverse | alternate | alternate – reverse
  • Filling pattern: none | recently | backwards | to both
  • Whether to suspend: paused | running
  • Each of the above attributes has a corresponding individual attribute