The CSS unit system

Author：Chuan Chen 阅读数：37233人阅读分类： CSS

The CSS unit system is an indispensable part of styling design, determining how properties like element size, spacing, and color are rendered. From absolute units to relative units, viewport units, and function units, each type has its unique applications and calculation logic.

Absolute Units

Absolute units are fixed-size units that do not change based on the device or contextual environment. Common absolute units include:

px (pixels): The most commonly used unit, where 1px corresponds to one physical pixel on the screen.
pt (points): Often used in print, where 1pt equals 1/72 of an inch.
in (inches), cm (centimeters), mm (millimeters): Units based on physical dimensions.

.box {
  width: 300px;      /* Width of 300 pixels */
  font-size: 12pt;   /* Font size of 12 points */
  padding: 0.5in;    /* Padding of 0.5 inches */
}

Absolute units are suitable for scenarios requiring precise control, such as print styles or fixed-size UI elements. However, they may lack flexibility in responsive design.

Relative Units

Relative units are proportional to another value, making them more adaptable to different devices and contexts.

em: Relative to the current element's font size. If the current element's font-size is 16px, 1em equals 16px.
rem: Relative to the root element's (<html>) font size. By default, 1rem equals 16px.
%: Relative to the parent element's corresponding property value. For example, width: 50% means half the width of the parent element.

html {
  font-size: 16px;   /* 1rem = 16px */
}

.container {
  font-size: 1.2em;  /* Current font size is 1.2 times the parent's */
  width: 80%;       /* Width is 80% of the parent's */
}

.child {
  font-size: 0.8rem; /* Font size is 16px * 0.8 = 12.8px */
}

Relative units are highly useful in responsive design, especially rem and em, which allow dynamic layout adjustments based on font size.

Viewport Units

Viewport units are relative to the dimensions of the browser viewport, often used for full-screen layouts or responsive design.

vw (viewport width): 1vw equals 1% of the viewport width.
vh (viewport height): 1vh equals 1% of the viewport height.
vmin: 1% of the smaller dimension of the viewport (width or height).
vmax: 1% of the larger dimension of the viewport (width or height).

.header {
  height: 10vh;     /* Height is 10% of the viewport height */
  width: 100vw;     /* Width is 100% of the viewport width */
}

.sidebar {
  width: 20vmin;    /* Width is 20% of the viewport's smaller dimension */
}

Viewport units are ideal for creating full-screen layouts or dynamically resizing elements, but note that their calculations may vary across browsers on mobile devices.

Function Units

CSS also provides function units for dynamic value calculations.

calc(): Allows mathematical expressions in declarations.
min() and max(): Return the smallest and largest values from a set, respectively.
clamp(): Restricts a value within a range, with the syntax clamp(minimum, ideal, maximum).

.container {
  width: calc(100% - 40px);  /* Width is the parent's width minus 40 pixels */
  font-size: min(2vw, 24px);  /* Font size is 2% of the viewport width but no more than 24px */
  padding: clamp(10px, 5%, 20px); /* Padding is between 10px and 20px, preferring 5% */
}

Function units are particularly useful for complex calculations, such as dynamic adjustments in responsive layouts.

Color Units

Colors in CSS can also be represented using different units.

Hexadecimal: #RRGGBB or #RGB.
RGB/RGBA: rgb(255, 0, 0) or rgba(255, 0, 0, 0.5).
HSL/HSLA: hsl(120, 100%, 50%) or hsla(120, 100%, 50%, 0.5).
Keywords: Such as red, blue, etc.

.text {
  color: #ff0000;                  /* Red */
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
  border-color: hsl(120, 100%, 50%); /* Green */
}

The choice of color unit depends on specific needs. RGBA and HSLA support transparency, while HSL is more intuitive and readable.

Angle and Time Units

CSS also supports angle and time units, primarily for animations and transformations.

Angles: deg (degrees), rad (radians), grad (gradians), turn (turns).
Time: s (seconds), ms (milliseconds).

.spinner {
  transform: rotate(45deg);  /* Rotate 45 degrees */
  transition: all 0.3s;      /* Transition animation lasts 0.3 seconds */
}

These units are highly useful for animations and interactive effects, enabling precise control over motion and timing.

Other Units

There are also specialized units, such as:

fr: Fractional unit in CSS Grid layouts, used to distribute remaining space.
ch: Relative to the width of the "0" character in the current font.
ex: Relative to the x-height of the current font.

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* First column takes 1 part, second takes 2 parts */
}

.monospace {
  width: 10ch; /* Width is 10 "0" characters wide */
}

These units are practical in specific scenarios, such as fr in grid layouts for flexible space allocation.

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：CSS的注释方法

下一篇：CSS的盒模型基础