[CSS] Basic knowledge of CSS

Selector

• element
  directly selects all elements
  such as: div, selects all div elements

• #id
  Select an element with an id
  such as: #title, select an element with an id of title
  

• .class
  Select some elements that contain a certain class
  For example: .item, select the element whose class is item (select all the following three)
  
  .itemselect the element whose class contains item (select all the following three)
  

• At the same time
  .item.blue, select elements with class item and blue (1 and 3) and
  div.blueselect div elements (1 and 3) with class blue
  

• Parent-child relationship
  .item div(there is a space in the middle) Select all div sub-elements of the element whose class is item (not just the first-level son, but all sub-elements)
  .item >divSelect the first-level div sub-element of the element whose class is item

size

height/width: set the height/width,
you can set the value or the percentage (relative to the percentage of the size of the parent element, if the parent element does not have a height set, it is set relative to the parent element of the parent element)

The width fills the page
by default. The height of the parent element is the sum of the heights of the child elements by default.

The height of the parent element is less than the sum of the heights of the child elements

• overflow
  • hidden: hide redundant elements
    
• scroll: add a scroll bar
  

indentation

margin: the distance from the border to the parent element
border: the border of the element
padding: the distance from the element to the border

Element height = height + padding-top + padding-bottom + 2 * border (upper and lower two borders)

element width = width + padding-left + padding-right + 2 * border

---

The following example

margin-left: 50px; the distance between the left border and the parent element
border: 2px solid; the element border width
padding-left: 50px the distance between the element and the left border
height: 100px; the element height
padding-top: 50px; the distance between the element and the upper border
margin- top: 50px; the distance between the upper border and the parent element

The height of the element is height + padding-top + 2 * border = 154 The
width of the element is width + padding-left + 2 * border = 510
Ps: The width here is not set, it is obtained from the child elements

• box-sizing:
  After border-box is set, the height/width of the element is directly equal to height/width
  (adjust the height of the element itself so that the final height is equal to height)
  

Location

top\bottom\left\right combined with position

• position
  • relative: the original position will not be replaced, and it will be displaced relative to the original position
  • absolute: The original position will be replaced, and the displacement relative to the page will scroll out of the page due to the scroll bar
  • fixed: The original position will be replaced, and the displacement will be relative to the page, and the page will not be rolled out due to the scroll bar

Set the parent element to position:relative and the child element to position:absolute, you can set the child element relative to the parent element

text style

font-size: set size
font-family: set font
font-style: set italic
font-weight: set bold
color: set color

---

text-align: text alignment

---

Wrapping
white-space:nowrap: Exceeding the width without wrapping
overflow:hidden: Exceeding part hidden
text-overflow:ellipsis: Exceeding part ellipsis truncated

flex layout

flex is a layout method

• display
  • flex set to flex layout
• flex-direction
  • column vertical arrangement
  • column-reverse reverse vertical
  • row horizontal arrangement (default)
  • row-reverse reverse horizontal row

Take vertical as an example

• align-items sets the horizontal alignment ( perpendicular to the arrangement direction , if the elements are arranged horizontally, set the vertical alignment)

  • stretch horizontal stretch fill
  • center Horizontally centered
    

• justify-content sets the vertical alignment

  • space-around The distance between elements is twice the distance between top and bottom
    

  • space-between The distance between the upper and lower elements is zero and the distance between the elements is equal
    

  • space-evenly The distance between top and bottom and between elements is equal
    

flex can be nested

• align-self sets its own alignment
  align-center sets the alignment of its son elements