This is the 4th day of my participation in the August More Text Challenge

CSS Cascading Style Sheets

  1. The introduction of CSS

(1) Interline style

<div style="width:100...." >Copy the code

(2) Page-level styles

<style type = "text/css">
  width:100px;
  height:100px;
  background:red;
</style>
Copy the code

(3) External style

<link rel:'stylesheet' type =" text/ CSS "href=" reference file address ">Copy the code

2. CSS comments start with “/” and end with “/”

/* This is a comment */Copy the code

3. Selector summary:

Id selector (# myID) 2. Class selector (.myclassName) 3. Tag selector (div, H1, P) 4. The adjacent selector (H1 + P) specifies the first paragraph 5 after all H1 tags of the element's immediate successors. The sibling combinatorial selector (X to Y) selects all Y elements 6 following X. Child selector (UL > LI) 7. Descendant selector (Li A) 8. Wildcard selector (*) 9. Property selector X[title]] 10 Property value selector X[href="foo"] Property value contains 11 of foo. X[href$=".jpg"] 13. A :hover input[type=radio]:checked. Clearfix :before. Clearfix :after X:not(selector Select part of a label, such as the first paragraph or the first line or word of D. (A false label consists of two colons ::.) Nth-last-child (n) X:nth-last-child(n) X:nth-of-type(n) Which X element is selected X:nth-last-of-type(n) The last X tag element X:first-child The first child X:last-child the last child X:only-child The parent tag of only one child X:only-of type X:first-of-type with only one child label selects the first sibling label of the specified labelCopy the code

Note: the selector is not overridden before unless the value inside is overridden. 4. Selector priority The selector has an existing priority, and in general, the more special the selector, the higher its priority. The more accurate the selector is, the higher its priority. Rules:! Important > header styles > ID > class | | > tag attribute selector pseudo class selector > wildcard selector

In fact, the weight represents the priority of the selector. The weight of each selector is as follows:

CSS weight:! Important Infinity header styles 1000 ID selector 100 class class selector 10 tag selector | | attribute selectors pseudo class selector 1 wildcard selector is 0Copy the code

Note: The weight value is 256 base; Other complex selectors (e.g., parent selectors, direct child selectors, and parallel selectors) are simply written in the peer selectors, and the weight value is equal to the sum of the weights of the simple selectors.

  1. Element classification
  • Inline elements

Span strong em a del… Features: (1) Content determines the position of elements; (2) The width and height cannot be changed through CSS;

  • Block-level elements

Div P ul li OL form address… Features: (1) Exclusive line; (2) The width and height can be changed through CSS;

  • Row-level block elements

Such as: img… Features: (1) Content determines the position of elements; (2) The width and height can be changed through CSS;

Margin-left: -6px; margin-left: -6px; margin-left: -6px; You can use display to change elements, inline/ inline-block/block

  1. The box model

Content (Padding) Border (Margin)

Number of padding and margin values: top, right, bottom, left; Three hours: up, left and right, down; 2 hours: up and down, left and right; 1 hour: all four directions are the same

  1. positioning

Top: distance from the top left: distance from the left right: distance from the right bottom: distance from the bottom element absolute position

  • The location is based on the parent that has been located recently. If not, the location is relative to the document.

(2) I am in a relative position. Relative positioning; The elements that are relative to their original position.

(3) Position: fixed; Fixed position

Z-index: Sets the level at which the element is displayed. The higher the value, the closer it is to us.

  1. bfc

The block-level format context triggers the BFC of a box:

1.position:absolute; Positioning (2) display: inline - block; Change style to inline block 3.float:left/right; 4 floating overflow: hidden; Overflow hiddenCopy the code
  1. Floating model

Float :left/right (1) allows elements to take sides; (2) The essence of floating model is: floating elements generate floating flow; All elements that generate a floating flow are invisible to block-level elements, but the elements and text classes that generate THE BFC with inline attributes and text are visible to the floating elements.

Clean up the floating stream with pseudo-elements

.nav:after{
  content:'';
  display:block;
  clear:both/right/left
}
Copy the code

Note: the pseudo-element is inherent in any element, and the clear floating user must be a block-level element; There are two pseudo-elements: span: : before span: : after

  1. Elements with position: absolute and float: left/right are automatically inline-block. All inline elements have the property of text, called text elements, including inline and inline-block elements.

  2. Overflow container dot display

white-space:nowrap; Overflow :hidden; Text-overflow :ellipsis; dotCopy the code
  1. General inline elements can only be nested within inline elements. In particular, an A tag cannot be nested within an A tag. General block-level elements can be nested with any element. Specifically, p tags cannot be nested with block-level elements.