CSS (Cascading Style Sheets) Cascading Style Sheets

Cascading means

  • Cascading styles: You can style the same selector more than once
  • Selector cascade: You can style the same element with different selectors
  • File stacking: Multiple files can be stacked

These features make CSS extremely flexible. Use caniuse.com to see which browsers support which features.

The CSS syntax

Syntax 1: Style syntax

Selector {property name: property value; /* comments */}Copy the code

Grammar 2: At grammar

@charset "UTF-8"; / / @import url(2.css); @media (min-width: 100px) and (max-width: 200px) {Copy the code

The steps of the Border debugging method are as follows:

  • If you suspect a problem with an element, add a border to it
  • Border does not appear? Indicates an incorrect selector or syntax
  • Border appears? See if the boundaries are as expected
  • The border can be deleted only after the bug is resolved

Here are some basic concepts of CSS

  • Document Flow Normal Flow, block, inline, inline block

Document flow is the flow direction of elements in a document

  1. Inline elements go from left to right, and line breaks only when they reach the right, as shown below

The inline width is the sum of internal inline elements and cannot be specified with width. The inline height is determined indirectly by inline-height, regardless of height.

  1. Block elements start on a separate line from top to bottom, as shown below

Block automatically calculates the width by default (auto by default, not 100%), specified by width. Block height byInternal document flow elementsHeight (some elements can leave the document flow).

  1. The inline-block element is also left to right, but does not split itself in two when it reaches the right, as shown below

Inline-block uses width to set the width. Inline-block is similar to block in that you can set height.

Special case: Overflow occurs when the content is wider or taller than the container.

Use Overflow to set whether scroll bars are displayed. Auto is flexible; Scroll is forever display; Hidden is the part that is directly hidden from view; Visible is the direct display of the overflow part. Overflow can be divided into overflow-x and overflow-y.Note: HTML 5 has abandoned the concept of “inline elements”; all elements can be made inline using CSS.

  • Two box models

You can think of each HTML tag as a square, and then this square is surrounded by several smaller squares, like a box wrapped in layers. This is called the box model. Box models are divided intoContent Box Content boxandBorder box Border box. Where, the properties width and height of content box only contain content; The width and height attributes of the border box contain the border and padding, and refer to content+padding+border. Box-sizing controls whether to select content box or border box. Border-box is more suitable for human thinking and easier to use.

  • Margin merge (only up and down merge exists)

There are two cases: margin merge of parent element and margin merge of sibling element

Several ways to block mergers:

  • Parent-child merges are covered by padding/border
  • The parent-child merge is blocked with Overflow :hidden
  • Parent and child merge using display: flex
  • Sibling merges can be eliminated with inline-block