CSS Units (Units)

Units are used to specify non-zero length values in CSS properties, and CSS commonly used units include: px, em, pt, percentage (%) and so on.

Understand CSS Units

The units for measuring length can be absolute units, such as pixels, points, etc., or relative units, such as percentages (%) and em units.

Non-zero values must specify CSS units because there is no default unit. Missing or ignoring a unit will be considered an error. However, if the value is 0, the unit can be omitted (after all, zero pixels and zero inches are the same measure).

Relative length units

Relative length units specify the length relative to another length property. Relative units are:

The em and ex units depend on the font size applied to the element.

using Em units

measurement1em equalsfont-sizeuses the calculated value of its element's attributes. It can be used for vertical or horizontal measurements.

For example, if font-size sets the element's to16px andline-heightis set to2.5em, then line-the calculated value of height in pixels is2.5x16px =40px.

p {
　　　　font-size:　16px;
　　　　line-height:　2.5em;
}

in font-the value of the size attribute itself will cause an exception, in this case, it refers to the font size of the parent element.

Therefore, when we specify the font size in em in1em equals Inherited font-size. Therefore, font-size: 1.2em; makes the text larger than the text of the parent element1.2倍。

body {
　　　　font-size:　62.5;
　　　　font-family: Arial, Helvetica, sans-serif;
}
p {
　　　　font-size:　1.6em;
}
p: first-letter {
　　　　font-size:　3em;
　　　　font-weight:　bold;
}

Let's understand the full meaning of this code. The default font size in all modern browsers is16px. Our first step is to set the font-size of62.5％ to reduce the size of the entire document, which will reset the font size to10px（16px of62.5％）.

This is the default roundingfont-sizefor convenient px to em conversion.

Use a shockproof device

The ex unit is equal to the x-height of the current font.

It is called x-height because it usually equals the height of the lowercase letter 'x', as shown below. However, the ex unit is also defined for fonts that do not contain an 'x'.

Absolute Length Units

Absolute length units are fixed with each other. They are highly dependent on the output medium and are particularly useful when the output environment is known. Absolute units consist of physical units (such as in, cm, mm, pt, pc) and px units.

Absolute physical units, such as in, cm, mm, etc., should be used for print media and similar high-resolution devices. For desktops and low-resolution devices such as screen displays, it is recommended to use pixel or em units.

h1　{　margin:　0.5in;　}　　　　　　　/*　inches　　*/
h2　{　line-height:　3cm;　}　　　　/*　centimeters　*/
h3　{　word-spacing:　4mm;　}　　　/*　millimeters　*/
h4　{　font-size:　12pt;　}　　　　　/*　points　*/
h5　{　font-size:　1pc;　}　　　　　　/*　picas　*/
h6　{　font-size:　12px;　}　　　　　/*　picas　*/