What are the similarities and differences between relative units and absolute units in CSS?

CSS (Cascading Style Sheets) is a markup language used to describe the styles of elements on web pages. In CSS, there are two different length units, namely relative units and absolute units.

Relative units are calculated relative to the size of the element itself or its parent element. Common relative units are: percentage (%), em and rem.

Percentage units are calculated relative to the size of the parent element. For example, if the width of the parent element is 400px and the width of the child element is set to 50%, then the actual width of the child element is 200px (400px * 50% = 200px).

The em unit is calculated relative to the font size of the element itself. For example, if the font size of an element is set to 16px, and the width of a child element inside it is set to 2em, then the actual width of the child element is 32px (16px * 2 = 32px).

rem units are also calculated relative to the font size of the root element (that is, the html element). This means that no matter where in the document rem units are used, they will evaluate to the same value. For example, if the font size of the root element is set to 16px, and the width of an element is set to 2rem, then the actual width of the element is 32px (16px * 2 = 32px).

The advantage of relative units is that they can dynamically adjust the style of an element based on the size or font size of the parent element, allowing for responsive design.

Absolute units are fixed values ​​specified during the design process and will not change when the parent element or font size changes. Common absolute units are: pixels (px), points (pt), and inches (in).

The pixel unit is the smallest unit displayed on the screen and is the most commonly used absolute unit. For example, if the width of an element is set to 200px, the actual width of the element is 200 pixels.

The dot unit is a commonly used unit of length in the printing industry. 1 dot is equal to 1/72 inch. In CSS, 1pt is equal to 1.333px (one pixel is approximately equal to 0.75 points), so if the width of an element is set to 150pt, the actual width of the element is 200px (150pt * 1.333 = 199.95px).

The inch unit is the internationally accepted length unit, 1 inch is equal to 25.4 millimeters. If the width of an element is set to 2in, the actual width of the element is 50.8mm (2in * 25.4 = 50.8mm).

Compared with relative units, the advantage of absolute units is that they provide precise control and are suitable for elements that require fixed sizes, such as borders, background images, etc.

The following are some specific code examples showing the use of relative units and absolute units:

/* 使用相对单位百分比 */
.container {
  width: 80%;
  margin: 0 auto;
}

/* 使用相对单位em */
h1 {
  font-size: 2em;
}

/* 使用相对单位rem */
p {
  font-size: 1.5rem;
}

/* 使用绝对单位像素 */
.img {
  width: 300px;
  height: 200px;
}

/* 使用绝对单位点 */
.text {
  font-size: 12pt;
}

/* 使用绝对单位英寸 */
.box {
  width: 2in;
  height: 1in;
}

Through the above code examples, we can clearly see the difference between relative units and absolute units. the difference. Using relative units allows you to adaptively adjust the style of an element based on changes in the parent element or font size, while using absolute units allows you to have a fixed size.

To summarize, relative units are suitable for responsive design, while absolute units are suitable for elements that require fixed sizes. In actual development, we can choose appropriate units according to different needs to achieve the best results.

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