1. CSS basics

Cascading Style Sheet CSS (Cascading Style Sheet) Invented by Sir Lee’s friend, Mr Lai.

Why Cascading style sheets

Cascading styles, cascading selectors, cascading files. This nature of CSS makes it very flexible.

The version of CSS

  • CSS 2.1 is the most widely used version
  • CSS 3 is the most modern version

You can find out which browsers support which features at caniuse.com.

The CSS syntax

  • Style syntax
Selector {property name: value; /* comments */}Copy the code
  • @grammar
@charset "UTF-8"; /* declare the document character encoding to utF-8 */ @import url(x.css); / * import x.c ss document * / @ media (min - width: 100 px) {} / * media query * /Copy the code

CSS debugging

  • W3C CSS Validateor, a W3C validator, provides accurate results.
  • Webstorm looks at colors. But the software requires computer configuration.
  • Vscode looks at the color, but it only gets a rough idea.
Border debugging method

If you suspect a problem with an attribute of the element, add a border around it. If border appears and is set as expected, a bug in the code appears below the property, possibly a selector or syntax error.

The CSS document flow

In CSS, documents flow by default from left to right (inline elements) and from top to bottom (block-level elements). The height of an inline element is indirectly determined by the line height. Block-level elements are the sum of the heights of their internal document flow elements and can be set.

CSS box model

When laying out a document, the browser represents all elements as a rectangular box, each box consisting of border, margin, padding, and content. Box models can be divided into border-box and content-box. The width of the former includes the padding, content and border of the box, while the width of the latter is only the width of the content. The border-box is generally used because its width is the set value and you do not need to add or subtract the width.

2. CSS layout

1, float layout

Add float: left to the child element; And width attributes, the parent element adds the following attributes to complete the float layout.

.clearfix::after {
      content: "";
      display: block;
      clear: both;
      }

Copy the code

Use negative margins to deal with average layout.

Flex layout

flexboxfroggy.com/#zh-cn

3. Grid layout

Two dimensional layout, first draw a grid on the page, then take the grid area as required. cssgridgarden.com/#zh-cn

3. CSS positioning

Vertical to the order on the page (top to bottom) : inline elements, floating elements, block-level elements, border, background.

The position of the value
  • Static: the default value
  • Relative is used as a displacement or attributeposition: absolute;Element’s parent element
  • Absolute, which is positioned relative to the nearest location element in the ancestor element
  • Fixed, fixed

All of the above are positional elements except the default static.

Cascading context

From top to bottom: positioned element (z-index=0/1/2), inline child element, floating element, block-level child element, border, background, positioned element (z-index<0).

  • Each cascading context is a small world

Consult the MDN documentation to see which attributes create a cascading context.

4. CSS animation

How browsers render

  1. Building an HTML tree (DOM) from HTML
  2. Building a CSS Tree from CSS (CSSOM)
  3. Combine two trees into a render tree
  4. Layout (document flow, box model calculates size and location)
  5. Paint (border text, color, shadow, etc.)
  6. Composite, according to the hierarchical relationship display screen

Two ways to animate CSS

The transition process

You add the transition attribute to an element, and then you add another attribute to an element, and then you transition from the current attribute to the new attribute. The syntax is as follows: Each parameter is the attribute name, duration, conversion mode, and delay time.


/* property name | duration | timing function | delay */
eg: transition: margin-right 4s ease-in-out 1s;

Copy the code
Animation method,

Add keyframes

  • The two methods
@keyframes x { from {transform: transitionX(100px); } to {transform: transitionX(10px); } } or @keyframes x { 0% {transform: transitionX(100px); } 100% {transform: transitionX(10px); }}Copy the code

JS Bin (flachang.github. IO)

The syntax for adding an animation property to an element is

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;
Copy the code

JS Bin (flachang.github. IO)