CSS length unit and difference em ex px pt in

1. Unit of relative css Length

Ø font height of em Elements

Height of x in ex font

Ø px pixel Pixels

% Percent Percentage

2. Absolute css length unit

Ø in inch Inches (1 inch = 2.54 cm)

Ø cm Centimeters

Mm millimetre

Ø pt point Points (1 point = 1/72 inch)

Pc pickup Picas (1 pickup =)

3. Description of the unit em

Em indicates the font height. The default font height of any browser is 16 PX. Therefore, the unadjusted browsers all match: 1em = 16px. Then 12px = 0.75em. However, em is not fixed. It inherits the font size of the parent element. You may set the font size to 1.2em in the content div, that is, 12px. Then you set the font size of selector p to 1.2em. However, if p is a child of content, the font size of p is not 12px, instead, 1.2em = 1.2 * 12px = 14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent-level element body, that is, 16px * 62.5% * 1.2 = 12px, and p is its sublevel, em inherits the font height of the content, that is, 12px. So the 1.2em of p is no longer 12px, but 14.4px.

4. Description of unit pt

In the printed layout, point is an absolute value, which is equal to 1/72 inch. It can be measured using a ruler, physical inches. But in css, pt does not mean so. Because our display is divided into pixels, a single pixel can only have one color (to simplify it, we will not discuss the next pixel anti-sawtooth technology). It should be displayed on the screen, you must first convert the length in pt units to the length in pixels. The conversion media is DPI (in fact, the so-called DPI here, is the term used in operating systems and browsers, I .e., PPI, pixels per inch, which is different from DPI in scanners, printers, and digital cameras ).

For example, in any operating system, the default DPI of Firefox is 96, so 9pt = 9*1/72*96 = 12px.

Therefore, although "I" and "1pt" in "DPI" are equal to 1/72 inch ", they do not represent physical inches, but the two units are equal to each other, in this case, it is reduced in the multiplication.

How can we calculate the actual physical length? Take out a ruler and measure the visible width of your monitor (11.2992 inch here). divide it by the horizontal resolution (1024 pixels here). The physical length of each pixel is obtained.

Now we can answer this question: how much space does the 9pt font occupy on the webpage? The answer is: 9*1/72*96*11.2992/1024 = 0.1324 inch = 0.3363 cm.

5. pt and px

Although pt is an absolute unit, it is only for the output device. It is a very useful font unit in word and abits. Regardless of the display resolution, the results are the same on paper.

However, Web pages are mainly used for screen display, rather than printing. Px can accurately represent the position and size of an element on the screen.

Of course. When dpi is 96, 9pt = 12px.