The document flow

A document flow is a form that is divided into rows from top to bottom, and the elements in each row are arranged from left to right.

inline

  • Elements are arranged from left to right until they reach the right end
  • The width is the sum of internal inline elements and cannot be specified with width
  • Height is determined indirectly by line-height, regardless of height

block

  • The elements go from top to bottom, each one on its own line
  • Block automatically calculates the width by default, using width (never write width 100%)
  • The height is determined by the internal document flow element and can be set

inline-block

  • Elements go from left to right
  • The width can be set to width
  • Height You can set height

Overflow spill

  • Auto specifies whether to display the scroll bar based on the content
  • Scroll is always showing the scroll bar
  • Hidden is to hide the overflow directly
  • Visible shows the overflow directly
  • Overflow can be divided into overflow-x and overflow-y

How browsers render

Browser rendering process

  • Building an HTML tree (DOM) from HTML
  • Building a CSS Tree from CSS (CSSOM)
  • Combine two trees into one render tree
  • Layout (document flow, box model, calculated size and location)
  • Paint (draw border colors, text colors, shadows, etc.)
  • Compose (display screen according to stacked sample relationship)

How to update styles

Js is generally used to update styles

div.style.background='red'; div.style.dispaly='none'; div.classListAdd('red'); Div.remove () removes the node directly;Copy the code

Three update modes:

  • Js/CSS -> Style -> Layout -> Draw -> Composition example: div.remove()
  • Js/CSS -> Styles -> Draw -> Composition For example: Change the background color
  • Js/CSS -> Styles -> Composition For example: Change transform

Two ways to animate CSS: Transition and Animation

Transform is used for four functions

  • The displacement of the translate
  • The zoom scale
  • Rotate the rotate
  • Tilt skew
  • You need to coordinate the transition

The transition transition

grammar

  • Transition: Indicates the delay of the attribute name duration

Transition: Left 200ms Linear 1s

  • You can also separate two different attributes with a comma

Transition: Left 200ms, top 200ms

  • Display: None ->block cannot transition. Visibili: Hidden -> Visible
  • Background colors and opacity can be transitioned
  • Transition means has: linear | ease | ease – in | ease – out | ease – in-out | cubic bezier – | step – start | | step – end steps

animation

There are two steps to making an animation: 1. define the animation first; 2. call the animation

Define the animation

@keyframes heart{ 0%{ transform: scale(1); 100%} {the transform: scale (1.3); }}Copy the code

Call the animation

Abbreviations: animation: length direction number of delay | | | | | transition way whether filling | | suspended animation name * length: 1 s or 1000 ms

  • Transition mode: The value is the same as transition
  • Times: 3 or 2.4 or infinite(loop)
  • Direction: reverse/alternate/alternate – reverse
  • Filling way: none/recently/backwards to both
  • Whether to pause: paused/running