Values are regularly used in CSS. The are specified sometimes in absolute units and in other times in relative units.
CSS provides values for length, angle, frequency and within each CSS supports conversion between the different units of measurement.
An understanding of the various units or measurement that CSS supports to allow web developers and designers to work within their comfortable thought space.
Below is a list of units supported in CSS.
cm, mm, Q, in, pt, pc, px
| Unit | Name | Equivalent to |
|---|---|---|
| cm | Centimeters | 1cm = 37.8px = 1/2.54 of 1in |
| mm | Millimeters | 1mm = 1/10 of 1cm |
| Q | Quarter-millimeters | 1Q = 1/40 of 1cm |
| in | Inches | 1in = 2.54cm = 96px |
| pc | Picas | 1pc = 1/6 of 1in |
| pt | Points | 1pt = 1/72 of 1in |
| px | Pixels | 1px = 1/96 of 1in |
deg, grad, rad, turn
| Unit | Name | Equivalent to |
|---|---|---|
| deg | Degree | 360deg = 1 full circle |
| grad | Gradian | 400grad = 1 full circle |
| rad | Radian | 6.2832rad = 1 full circle (π approx = 3.1416) |
| turn | Turn | 1 turn = 1 full cirle |
s, ms
| unit | name | equivalent to |
|---|---|---|
| s | second | 1s = 1000ms |
| ms | millisecond | 1ms = 1/1000 of 1s |
Hz, kHz
| unit | name | equivalent to |
|---|---|---|
| Hz | Hertz | 1Hz = 1/1000 of 1 kHz |
| kHz | Kilo Hertz | 1KHz = 1000Hz |
dpi, dpcm, dppx
As the name suggests, these values provided with these units are relative to some other value. It could be related to some parent element or the viewport.
em, ex, ch, rem
%, vw, vh, vmin, vmax
cqw, cqh, cqi, cqb, cqmin, cqmax
Note
It is common practice to define an absolute value to the container element and then use relative values for all descendant elements.
The above is the detailed content of Units for Values in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
