Difference between UL and OL

  1. ul: unordered list, unordered list,typeAttributes are:disc— Solid circle (default),circle— Hollow circle,square— Solid blocks
  2. ol: ordered list, ordered list,typeAttributes are:1– Numbers (default),a– Lowercase letters,A– Uppercase letters,i— Lowercase Greek letters,I– Uppercase Greek letters.

How does CSS work?

When a browser presents a document, it must combine the document content with the corresponding style information. This process is generally divided into two stages:

  1. The browser first converts markup language and CSS into a DOM (Document Object Model) structure. The DOM now represents the corresponding document in the computer’s memory, because it has merged the document content with the corresponding style sheet.
  2. Finally, the browser displays the content of the DOM.

Cascade and inheritance

Priority:

  1. Styles defined by web developers > Styles defined by web readers > default styles for browsers
  2. The child element’s own style takes precedence over styles inherited from its parent

! import

Users can override the styles defined by the developer by using this keyword

The text style

  1. Font: the font-family

  2. Size: the font size

<absolute-size>: xx-small ... Xx-large <relative-size>: larger/smaller <length>: 12px / 0.8em <percentage>: 80% / inheritCopy the code

Em = Desired pixel size/parent font pixel size, which is essentially the same as percentage. Can be adapted to the user’s font. Rem is a new relative unit (root EM) in CSS3, which ensures the relative size of the root layout while avoiding the interference of the superview.

  1. High line:line-height

Number: No unit number multiplied by the font size of the element. Recommended. It does not yield uncertain results when inherited

Length/percentage: May give inconclusive results

  1. text-decoration:

text-decoration-line || text-decoration-color || text-decoration-style || text-decoration-thickness

  1. font-style: italic
  2. font-weight: Text thickness,normal: 400,bold: 700,medium: 500
  3. text-indent: Indent, can be positive or negative
  4. text-transform: Uppercase
  5. text-align: Text alignment
  6. word-spacing: Word spacing
  7. text-size-adjust: Text overflow algorithm used on mobile phones or tablets
  8. letter-spacing: Text spacing, andword-spacingThe difference is that one is a word and one is a letter
  9. word-break: How to break lines inside words
  10. overflow-wrap: Whether the browser allows word breaks to prevent overflow when an unbreakable string is too long to fill its wrap box.

Box model and positioning

  1. The child element position follows the browser width
Child float: left Parent clears float Overflow: hiddenCopy the code

If all the child elements float, the parent element does not float. If all the child elements float, the parent element does not float. In fact, the parent element also floats to the same layer. Overflow hiding 2. Clear float

Clear: Both is relative to child elements, in the true sense of the clear float

Element overlap: Set margin-right to negative

The inline width is the sum of internal inline elements and cannot be specified by width. Block elements cannot be set inside inline

Block automatically calculates the width by default. Specify width, but do not set width: 100%

Inline-block is the same as block, except without a line break

One element is to the left of another element

 -----  ------------------------
| con ||                        |
|     ||                        |
 -----  ------------------------
 position: absolute;
 left: 0;
 transform: transformX(-100%);
Copy the code

Surround effect: float: left

Related documents: Flexible use of CSS development techniques juejin.cn/post/684490… Juejin. Cn/post / 684490…