What is the css unit of measurement?

CSS measurement units are used to specify the size, spacing, borders and other attributes of elements, and can be divided into absolute units and relative units. Absolute units include pixels, inches, centimeters, millimeters, and points. Relative units include percentage, window width, window height, window minimum width, window maximum width, and font relative units. Choosing the appropriate measurement unit can make the page adaptable and responsive, while taking into account the characteristics and compatibility of different units.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

There are a variety of measurement units in CSS that are used to specify the size, spacing, borders and other attributes of elements. These units of measurement can be divided into two categories: absolute units and relative units.

1. Absolute unit:

- Pixel (Pixel, px): Pixel is the most commonly used absolute unit, which represents a point on the screen. Pixels are fixed and do not change based on screen size. For example, width: 200px; means that the width of the element is 200 pixels.

- Inch (Inch, in): Inch is a physical unit, indicating that 1 inch is equal to 2.54 centimeters. For example, width: 2in; means the element is 2 inches wide.

- Centimeter (cm): Centimeter is a physical unit, indicating that 1 centimeter is equal to 0.3937 inches. For example, width: 5cm; means that the width of the element is 5 cm.

- Millimeter (mm): Millimeter is a physical unit, indicating that 1 millimeter is equal to 0.03937 inches. For example, width: 50mm; means that the width of the element is 50 mm.

- Point (Point, pt): Point is a physical unit, indicating that 1 point is equal to 1/72 inch. For example, font-size: 12pt; means the font size is 12 points.

2. Relative unit:

- Percentage (%): Percentage is a unit of measurement relative to the parent element. For example, width: 50%; means that the width of the element is 50% of the width of the parent element.

- Viewport Width (vw): Viewport width is a unit of measurement relative to the width of the browser window. For example, width: 50vw; means that the width of the element is 50% of the width of the browser window.

- Viewport Height (vh): Viewport height is a unit of measurement relative to the height of the browser window. For example, height: 50vh; means that the height of the element is 50% of the height of the browser window.

- Viewport Minimum Width (vmin): The minimum width of the viewport is a unit of measurement relative to the smaller of the browser window width and height. For example, width: 50vmin; means that the width of the element is 50% of the smaller of the browser window width and height.

- Viewport Maximum Width (vmax): The maximum width of the viewport is a unit of measurement relative to the larger of the browser window width and height. For example, width: 50vmax; means that the width of the element is 50% of the larger of the browser window width and height.

- Font Relative Units: including relative units such as em, rem and ch, used to specify font-related measurements. em is the font size relative to the parent element, rem is the font size relative to the root element (i.e. the html element), and ch is the width relative to 0 characters.

Choosing the appropriate measurement unit can make the page appear consistent on different devices and have responsive features. When choosing a unit of measurement, factors such as the size, layout, and available space of the elements need to be considered based on actual needs and design requirements. At the same time, you also need to pay attention to the characteristics and compatibility of different measurement units to ensure the consistency and reliability of styles across different browsers and devices.

To summarize, CSS provides a variety of measurement units, including absolute units (pixels, inches, centimeters, millimeters, points) and relative units (percentage, window width, window height, window minimum width, window maximum width) , font relative units). Choosing the appropriate measurement unit can make the page adaptable and responsive, while taking into account the characteristics and compatibility of different units.

The above is the detailed content of What is the css unit of measurement?. For more information, please follow other related articles on the PHP Chinese website!