The Chrome Debug panel box model always shows the pixel values of each part of the current block, which is handy

pixel

  1. What is a Pixel?
    • In front-end development, the horizontal and vertical directions of the viewport are made up of many small squares, one of which is a pixel
    • For example, if div is 100 x 100, then horizontal takes up 100 squares and vertical takes up 100 squares
  2. Pixel features
    • – Doesn’t vary with viewport size, pixels are a fixed unit (absolute)

Percentage (important)

  1. What are percentages?

    • Percentage is a dynamic unit in front-end development that is always computed with reference to the parent element of the current element
    • For example, if the parent element is 200px wide and high and the child element is 50% wide and high, the child element is 100px wide and high

  2. Percentage characteristic

    1. The child element width is calculated with reference to the parent element width

    2. The height of the child element is computed with reference to the height of the parent element

    3. The padding of the child element is computed both horizontally and vertically by referring to the width == of the parent element

    4. Margin is calculated in both horizontal and vertical direction by referring to the width of the parent element ==

    5. == Cannot == set the border of the element with a percentage

      Conclusion: The percentage is a dynamic unit that changes with the width and height of the parent element (relative units)

em

Look up for a long time, foreigners are not sure why em is em, also do not know how to evolve, only know that it is “relative to the size of the font unit”

  1. What is the em?

    • Em is a dynamic unit in front-end development, a unit relative to the font size of an element
    • For example, the font, size: 12 px; So 1em is equal to 12px

  2. Em features (find font size is the nearest principle)

    1. The font size is set for the current element, so it is relative to the font size of the current element

    2. The current element has no font size set, so it is the font size of the first ancestor element

    3. If the current element and all ancestor elements are not set to size, then this is equivalent to the browser’s default font size

      Conclusion: EM is a dynamic unit that changes with reference element font size (relative units)

Rem (important)

Rem is short for root-EM

  1. Rem is what?

    • Rem is root EM, and EM is a dynamic unit in front-end development,
    • The difference between REM and EM is that REM is a unit of font size relative to the == root == element
    • Font-size: 12px; , so 1em is equal to 12px

  2. Rem characteristics

    1. Except for the root element, the font size of other ancestor elements does not affect rem size

    2. If the font size is set for the root element, it is relative to the font size of the root element

    3. If the root element does not have a font size, it is relative to the browser’s default font size

      Conclusion: REM is a dynamic unit that changes with the font size of the root element (relative units)

vwvh

  1. What are VW (Viewport Width) and VH (Viewport Height)?
    1. Vw and VH are a dynamic unit in front-end development, as opposed to a web viewport
    2. The system will divide the width and height of the viewport into ==100 parts ==. 1vw will occupy 1% of the viewport width, and 1vh will occupy 1% of the viewport height
    3. Conclusion: VW/VH is a dynamic unit that changes with the size of the viewport (relative units)
  2. What are Vmin and Vmax?
    1. Vmin: The smaller of VW and VH
    2. Vmax: The larger use scenario in VW and VH: Keep element sizes relatively constant after screen rotation in mobile development (short or short, long or long)