The difference between relative units and absolute units in CSS

What is the difference between relative units and absolute units in CSS? Specific code examples are required

Units in CSS can be divided into relative units and absolute units. Relative units determine the size relative to the element itself or the size of its parent element, while absolute units determine the size relative to the size of the screen or print media. This article will introduce in detail the difference between relative units and absolute units in CSS, and provide corresponding code examples.

1. Relative unit

1. em

em is a unit determined relative to the font size of the parent element. When you define an element's font size to be 1em, it will be equal to the parent element's font size. ems can be used consecutively, with each em being calculated relative to the size of the previous em. For example, if the font size of the parent element is 16px and the font size of the child element is defined as 1.5em, then the font size of the child element is 24px (1.5 * 16px).

Sample code:

.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;
}

2. rem

rem is also a relative unit, but it is determined relative to the font size of the root element (html element). The use of rem is similar to em, but it does not inherit the font size of the parent element, only the font size of the root element. This avoids the cumulative calculation of font sizes when nesting multiple levels.

Sample code:

html {
  font-size: 16px;
}

.child {
  font-size: 1.5rem;
}

2. Absolute unit

1. px

Pixel (pixel) is an absolute unit, it is the screen The smallest unit shown above. px is used in CSS to define the width, height, border and other sizes of elements. It is not affected by the browser's scaling, and the pixel size remains the same no matter how the user resizes the browser window.

Sample code:

element {
  width: 200px;
  height: 100px;
  border: 2px solid #000;
}

2. cm

Centimeter (centimeter) is an absolute unit, which is a unit relative to physical size. Using cm units in print media allows for more precise control over the size of elements.

Sample code:

element {
  width: 10cm;
  height: 5cm;
}

The above is the difference between relative units and absolute units in CSS and the corresponding code examples. Through comparison and practice, we can better understand and apply these units and flexibly control the size and layout of elements. In actual development, choosing the appropriate unit according to needs can make the web page or application better adapt to the display effects of different devices and screen sizes.

The above is the detailed content of The difference between relative units and absolute units in CSS. For more information, please follow other related articles on the PHP Chinese website!