Cover image from Google

1. Basic grammar

  • mdn
  • w3cSchool

2. Selectors

2.1 Type of selector

(1), simple selector

Matches one or more elements by element type tagName, *,.class, or # ID.

(2),Property selector

Matches one or more elements by attribute/attribute value.

Presence

type Matching results
[ attr ] Matching containsattrAttribute
[ attr = val ] matchingattrAttribute values forvalAll the elements of
[ attr ~= val ] matchingattrProperty containsvalWords (space-separated)

Substring

type Matching results
[ attr ^= val ] matchingattrAttribute tovalAll elements at the beginning
[ attr |= val ] matchingattrAttribute tovalorval-All elements at the beginning
[ attr $= val ] matchingattrAttribute tovalAll the elements at the end
[ attr *= val ] matchingattrProperty containsvalAll the elements of
(3),Pseudo-classes and pseudo-elements

Pseudo-class: matches the relevant states and attributes of the element, such as :hover :first-child :nth-child(), single colon. Pseudo-element: Matches the relevant position of the element, such as ::after ::first-letter ::selection, double colons.

(4),Combination selector

Combine selectors: Combine multiple selectors.

type combination Matching results
The selector group A , B Matches the A or B selector rule
Descendant selector A B Matches the B selector rule, and B is A descendant of A
Child selector A > B Matches the B selector rule, and B is A child of A (must be A direct child)
Adjacent sibling selector A + B Matches the B selector rule, and B is the younger brother of A (AB belongs to the same parent, and B follows A immediately)
Any sibling selector A – B Matches the B selector rule, and B is any brother of A (AB belongs to the same parent, and B is after A, not necessarily next to it)

2.2. Selector priority

The priority increases according to the following rules:

  • The wildcard*, combination selector (> + - ‘‘) and negate pseudo-classes:not()Has no effect on priority (in:not()Internally declared selectors are still affected by the rule.)
  • Default browser style
  • Element type selectortagName, pseudo-element selector: :
  • Class selectors.class, property selector[ attr ], pseudo-class selector:
  • The id selector#id
  • Inline style< tagName style="" >
  • ! important

3. Values and units

3.1, the value

- Value - Percentage - Color: Background color Background-color Text color Border-color border-color name - hEX-RgB-hSL-rgba HSLA - function - RGB () RGBA () hsla() linear-gradient() - rotate() translate() - calc() - url()Copy the code

3.2, unit

-px - em em are the most common **relative** unit you'll use in web development. -REm-ex CH-vw vh - No unit value - animation S degCopy the code

4, inheritance,

5. Box model

5.1 Foundation of box Model

  • margin: margin, color transparent
  • border: border
  • padding: Inner margin, transparent color
  • content: Box contents
    • widthandheight : ContentThe width and height of. Default isauto, that is, the browser automatically calculates.
    • max-width/min-width min-height/max-height

Attention! Again, setting the width and height of an element is actually setting the width and height of the content field. The padding, border, and margin are also calculated for the actual size of the element. There are several computational models to understand:

  • W3c standard box model
Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Copy the code
  • IE box model

5.4. Outline

OUTSIDE the borders, to make the element “stand out”.

The outline refers to the area outside the border to set the style that makes the element stand out

5.2. Overflow

Overflow overflow controls what happens when the content area is too large and spills over an area.

value Matching results
visible By default, overflow sections are not curtailed in the content areacontentWill render outside the element box
hidden The overflow will be trimmed and not visible
scroll Overflow sections are trimmed, but scrollbars appear to view the content (vertical and horizontal scrollbars are always present)
auto andscrollSimilar, but only when necessary, scroll bar (only overflow direction scroll bar)

5.3 background clipping

background-clip: border-box|padding-box|content-box|initial|inherit;
Copy the code

5.5 Box type display

  • Display
  • Differences between display: none; and visibility: hidden

5.6. Margin merge

Block level format contextBFC

BFC ( block-formatting contexts )

  • Understanding CSS Layout And The Block Formatting Context
  • how to create BFC | MDN
  • CSS: What is Block Formatting Context (BFC)?

6. Mode the CSS

The Chrome developers use guide | Google Developer tools

7. Media inquiry@media

@media not|only mediatype and (expressions) {
  CSS-Code;
}
Copy the code
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
Copy the code
  • @media queries introductions | w3cSchool
  • @media rule in our CSS reference | w3cSchool

Reference:

  • CSS | mdn
  • CSS | w3cSchool
  • Learn CSS layout
  • CSS layout here | know almost legendary weapons of China
  • W3cSchool CSS layout