Notes organized from the classroom online teacher Liu Qiang’s video teaching course is very clear, concise courseware and attachments can be downloaded freely excellent! For beginners as well as experienced developers Web front-end Siege Lion (Spring 2021)

  1. There are several box models
    • IE box model (border + padding + content)
    • Box-sizing allows you to modify the way box models are calculated
  2. Block boxes and row boxes
  3. margin collapse:

The vertical margin will be merged with the same sign: take the difference sign with the highest absolute value: add the two

In fact, the distance between two elements is based on the one with the largest value and the two elements will overlap. The overlap is based on the one with the largest absolute value among the two values (only margin can be set to negative value in the box model attribute) The spacing between two elements is the sum of two values

  1. Rounded corners:

Rounded corners are rounded boxes with a perfect circle of radius X. They can be elliptical border-radius: 10px 20px 30px / 20px 10px 20px 30px; (The horizontal radius of each ellipse is 10px 20px 30px 20px; The vertical radius of the ellipse is 20px 10px 20px 30px.

  1. Shadow:

Doesn’t take up space

box-shadow: 10px 6px 12px 2px gray; / / level | | | | fuzzy degree vertical expansion size colorCopy the code
  1. Background:
background: clip|color|image|repeat|position|size  
Copy the code

background-size

  • The default image size is not scaled
  • 100px auto;
  • Allows the container to contain images (with one edge (horizontal or vertical) up to the container value)
  • Cover Scale the image until the image covers the container (parts of the image may be cropped out of the container)

background-clip

  • border-box;
  • padding-box;
  • content-box;

background-repeat

  • no-repeat
  • repeat(default)
  • repeat-x
  • repeat-y

background-position

  • Set the edge
    1. If you set a single edge, the other direction will be centered, for example: 
      background-position: top; /* Top and horizontally centered */  
background-position: right; /* Suck right and center vertically */
Copy the code
    2. Horizontal and vertical center 
      background-position: center; 
Copy the code
    3. Set two edges, for example: 
      background-position: top right; /* upper right corner */
Copy the code
  • Set the value
    1. To set a specific value, for example: 
      background-position: 20px 30px; /* horizontal 20px vertical 30px from the top left vertex; * /  
background-position: 50% 50%; /* Horizontal 50%, vertical 50%(container 50% and image 50% overlap)*/
Copy the code
  • Set edges and values 
    background-positon: bottom 20px right 20px;
Copy the code