Home > Article > Web Front-end > What is css3 unit
In CSS3, the unit is a unit of measurement, which can be divided into two types: 1. Size unit, used to express length, including em, rem, vw, vh, % and other relative length units and px , cm, pc and other absolute length units; 2. Color units, used to represent colors, including color names (such as red), "rgb(x,x,x)" and so on.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS3, a unit is a unit of measurement that can be divided into two types: size units and color units.
css size units:
There are many css size units, which can be described as diverse, but they can basically be divided into two categories: relative length units , absolute length unit.
Relative length units
Relative length units specify the properties of one length relative to another length. It is more suitable for different device relative lengths.
| Unit | Description |
|---|---|
| em | It is the description relative to the current application The font size of the element, so it is also a relative length unit. The default font size of general browsers is 16px, then 2em == 32px; |
| ex | depends on the height of the English letter x |
| ch | The width of the number 0 |
| #rem | rem is the abbreviation of root em (root em), rem acts on non-root When the element is used, it is relative to the font size of the root element; when rem acts on the font size of the root element, it is relative to its initial font size. |
| vw | viewpoint width, window width, 1vw=1% of the window width |
| vh | viewpoint height, window height, 1vh=1% of the window height |
| vmin | The smaller of vw and vh. |
| vmax | The larger of vw and vh. |
| % |
Tip: What is the difference between rem and em? The difference is that when using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element.
Absolute length unit
The absolute length unit is a fixed value that reflects a real physical size. Absolute length units depend on the output medium and are independent of the environment (monitor, resolution, operating system, etc.).
| Unit | Description |
|---|---|
| cm | cm |
| mm | MM |
| in | Inches (1in = 96px = 2.54cm) |
| px * | pixel (1px = 1/96th of 1in) |
| pt | point, approximately 1/72 inch; (1pt = 1/72in) |
| pc | pica, about 12pt, 1/6 inch; (1pc = 12 pt) |
Pixels may be considered the best "device pixels", and this pixel length has nothing to do with the text screen pixels you see on your monitor. px is actually a unit measured in degrees.
Color unit:
| Color name(such as red) | |
| RGB value (such as rgb(255,0,0)) | |
| RGB percentage value (such as rgb( 100%,0%,0%)) | |
| Hexadecimal number (such as #ff0000) |
css video tutorial, web front-end)
The above is the detailed content of What is css3 unit. For more information, please follow other related articles on the PHP Chinese website!