What are the commonly used CSS length units?

#CSS The most commonly used length units are pixels (px), percentage (%), rem, em, vh, vw, pt, cm, mm, in, etc. These units can be used to set the element's width, height, border size, font size, etc.

1. The pixel (px) unit is one of the most commonly used units. It is a fixed length unit calculated relative to the physical pixels of the electronic screen. Here is a code example:

div {
    width: 200px;
    height: 100px;
    font-size: 16px;
    border: 1px solid #000;
}

In the code example above, the width and height properties use pixel units to define the width and width of the div element. The height, font-size attribute uses pixel units to define the font size, and the width of the border attribute also uses pixel units.

2. Percent (%) units are calculated relative to the size of the parent element. Here is a code example:

div {
    width: 50%;
    height: 50%;
}

In the above code example, the width and height of the div element are set to 50% of the dimensions of the parent element.

3. rem units are calculated relative to the font size of the root element (i.e. the html element). Here is a code example:

html {
    font-size: 16px;
}

div {
    width: 10rem;
    height: 5rem;
    font-size: 1.2rem;
}

In the above code example, the font size of the root element is set to 16px, the width and height of the div element are 10 times the font size of the root element, and the font size Is 1.2 times the font size of the root element.

4. em units are calculated relative to the font size of the element itself. Here is a code example:

div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}

In the above code example, the width and height of the div element are set to twice the font size of the element itself.

In addition to the above units, there are some other length units:

• vh (viewport height) represents a percentage relative to the viewport height.
• vw (viewport width) represents the percentage relative to the viewport width.
• pt (point) is the printing unit, 1pt is approximately equal to 1/72 inch.
• cm (centimeter) means centimeter, 1cm is approximately equal to 96px/2.54.
• mm (millimeter) means millimeter, 1mm is approximately equal to 96px/25.4.
• in (inch) means inches, 1in is approximately equal to 96px.

In short, it is necessary to choose the appropriate length unit in different situations to achieve the best effect.

The above is the detailed content of What are the commonly used CSS length units?. For more information, please follow other related articles on the PHP Chinese website!