CSS Basics Review – Relative units

em

Em is the most common unit of relative length and is the computed value relative to the current element font-Sieze.

Disadvantages: The font size of the current element may be an inherited font size, which can cause unexpected (and unpredictable) results when specifying multiple nested element size.

rem

Rem is short for root EM, and REM is not relative to the current element, but units relative to the root element. Rem is less complex than EM, combines the advantages of PX and EM, retains relative units and is easy to use, making it predictable.

❝

When in doubt, use REM to set the size, PX to set the border, and em to set most other properties.

❞

The relative unit of the viewport

❝

Viewport – the border area of the visible part of a web page in a browser window. Does not include the browser address bar, toolbar, and status bar.

❞

  • Vh: 1/100 of the viewport height
  • Vw: 1/100 of the viewport width
  • Vmin: 1/100 of the size of the side with a wide viewport and a smaller high school
  • Vmax: 1/100 of the size of the side with a wider viewport and larger height

No unit value or row height

Some properties allow unitless values. The options are line-height, z-index, and font-weight (700 = bold and 400 = normal).

Lint-height is special in that it can have a unitless value or a unitless value. It inherits in a different way.

  • The period is defined asThe length of the(PX, em, REM, etc.), the child element inherits its computed value.
  • The duty ofNo unit value, inherits the declared value, that is, its computed value is recalculated on each inherited child element.
// The value is the lengthbody{
 font-size: 16px;
 line-height: 1.2 em; // Descendant inherits the calculated value 19.2px}
.txt {  font-size: 2em; // Calculate a value of 32px}  // The value is unitarybody {  font-size: 16px;  line-height: 1.2; // Descendant inherits the declared value} .txt{// its line-height is recalculated to 32 * 1.2 = 38.4px font-size: 2m; // Calculate a value of 32px} Copy the code

This article is formatted using MDNICE