An overview of the

Cascading Style Sheets CSS (Cascading Style Sheets) in the widely used version of CSS 2.1

Border debugging method: add a 1px border to the box for easy viewing. The border occupies a distance in the border box. You can change the border to outline

Document Flow (Normal Flow)

Flow direction:

  • Inline from left to right, lines are folded
  • Blocks go from top to bottom, each starting on another line
  • Inline-block goes from left to right and does not fold lines

Width:

  • The inline width is the sum of internal inline elements. Width cannot be set
  • Block automatically calculates the width by default (display: block). You can set width
  • Inline-block combines both features to set width

Height:

  • Inline height is determined indirectly by line-height, regardless of height (if there is no text in the tag, the height is still line-height).
  • The block height is determined by the internal document flow element and can be set to height (zero if there is no text in the tag).
  • Inline-block is similar to block in that height can be set

Width and height cannot be set for inline elements

The concept of “inline elements” has been abandoned in HTML 5, and all elements can be made inline using CSS

Do not add block-level elements to inline elements (do not add display: block elements to display: inline elements)

In most cases don’t write width: 100%; It’s better to write width: auto; The former will have 2 more border widths

They Overflow.

Content larger than container

Use overflow to set whether to display the scroll bar. Auto is flexible, scroll is always displayed, hidden is to hide the overflow part, visible is to display the overflow part

Overflow can be divided into overflow-x and overflow-y

In text boxes with scroll bars, inline elements show only the first screen

Two box models

In CSS box model, each HTML element will be regarded as a rectangular box, composed of content area, inside margin area, border area and margin area, box model is divided into W3C standard box model and IE box model.

The box model is divided into W3C standard box model and IE box model

Box-sizing: content-box: W3C standard box model (content box, content is the boundary), also the default setting property.

Box-sizing: border-box: IE box, width and height include the padding and border.

A larger border area in a border box does not make the entire box size, but only the content area smaller

CSS clears the default styles

* {margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul.li{
  list-style: none;
}
a {
  text-decoration: none;
  color: # 232323;
}
img {
  border: none;
  vertical-align: middle;
}
Copy the code

Margin merge

When two vertical margins meet, they form an outer margin. The height of the merged margins is equal to the greater of the two merged margins.

CSS layout

  • Compatible with IE9 Options: Float layout
  • Compatible with the latest browser choice: Grid layout
  • Compromise: Flex layout

Float layout

  • Two-column layout with float (e.g., top bar)
  • Use float for a three-column layout (e.g. content area)
  • Use float for a four-column layout (e.g. navigation)
  • Use float for average layouts (such as product displays)

Add float:left and width to the child element

Set the parent element class = “clearfix” and add the style. Clearfix looks like this:

.clearfix:after{
  content: ' ';
  display: block;
  clear: both;
}
Copy the code

Because float causes the child element to be outscaled, and because the height of the parent element of a block-level element is determined by the internal document flow element, the parent element cannot be stretched. Setting Clearfix allows the height of the parent element to be determined by the child element

Negative margin:zhuanlan.zhihu.com/p/25892372

Flex layout

zhuanlan.zhihu.com/p/25303493

Default Settings: main axis and cross axis. Change the vertical direction to main axis and horizontal direction to cross axis

Start by specifying a container

.container {
    display: flex | inline-flex; // There are two possible values}Copy the code

There are six properties that can be set on a container:

  1. Flex-direction (spindle direction)
  2. Flex-wrap (line wrap)
  3. Flex-flow (short for flex-direction and flex-wrap)
  4. Context-content (alignment of the main axis)
  5. Align-items (alignment on cross axes)
  6. Align-content (alignment of multi-line content)

There are six properties that can be set on the item:

  1. Order (order)
  2. Flex-basis (base width)
  3. Flex-grow (zoom in)
  4. Flex -shrink
  5. Flex (short for flex-grow, flex-shrink, and Flex-basis)
  6. Align-self (sets the alignment of a single item to be different from other items)

Keep in mind:

display: flex;
flex-direction: row | column;
flex-wrap: wrap;
justify-content: center | space-between;
align-items: center;
Copy the code

Gird layout

zhuanlan.zhihu.com/p/60883744

The CSS positioning

Location:

  • Static defaults to stay in the document stream
  • Relative Refers to a position that rises but does not depart from the document flow
  • Absolute: The reference is non-static in the ancestor
  • Fixed fixed positioning, positioning base is viewport
  • Sticky sticky positioning

CSS animations

Browser rendering 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)

CSS rendering process: Layout, drawing, composition (some properties of the layout, drawing will be omitted, different browsers vary)

The transform deformation

Four common functions:

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

Transition: transition: all 1s;

Inline elements do not support a transform and need to become a block first

The transition transition

Supplementary intermediate frame

Transition: Indicates the delay of the attribute name duration

transition: left 200ms linear

Animation animation

It’s an extension of the Transition property, which makes up for a lot of the shortcomings of Transition

Animation: Duration transition mode Delay Times Direction Fill mode Whether to suspend the animation name