What units of measurement are there in html?

There are three measurement units in HTML, one is px, the unit name is pixel, the second is em, the unit name is relative length unit, the third is pt, the unit name is point (Point), we will give it to you Analyze the functions of these three units respectively

The px unit name is pixel, relative length unit, pixel (px) is the domestic recommendation relative to the monitor screen resolution;

em The unit names are relative length units. Relative to the font size of the text in the current object, it is used more abroad; extended reading: html em tag, html em emphasis tag

pt unit name is point (Point), absolute length unit Generally, older versions of tables use length size units, but they are basically not used now.

htmlShort introduction to units:

Px Pixel; relative length unit.

Pt Point; absolute length unit

Em relative length unit, where em is spelled exactly the same as the "EM" of the html tag, and here em is used as a separate text unit .

1. In the past, IE could not adjust the font size that used px as the unit, but now almost IE supports it and it is recommended to use px as the unit;

2. Most foreign websites can The reason for the adjustment is that it uses em as the font unit;

3. Firefox can adjust px and em, but more than 96% of Chinese netizens use IE browser (or kernel).

px pixels (Pixel). Relative length unit. Pixel px is relative to the monitor screen resolution, and QQ screenshots also use PX as the length and width unit.

em is a relative unit of length. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.

htmlUnit comparison case

1. Simple example:

Width:300px The width is 300 pixels

Width:300pt The width is 300 points

Width: 300em Width is 300 relative length

Above we set different unit examples of the same value

Set different length em px pt units for text to see the effect:

CSS code:

.div-px{ font-size:12px} 
.div-pt{ font-size:12pt} 
.div-em{ font-size:2em}

HTML code:

<div class="div-px">我是div</div> 
<div class="div-pt">我是div</div> 
<div class="div-em">我是div</div>

em to px conversion

The default font height of any browser is 16px (16 pixels). All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

12px is equivalent to 9pt length;

12px is equivalent to 0.75em length;

9pt is equivalent to 0.75em length;

Generally we use em to convert px More

Advanced em to px conversion:

The default font height of any browser is 16px (16 pixels). All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

Specific usage time:

We declare an initial font-size=62.5% for all html tags

For example:

*{font-size=62.5%}

The following layout can be set according to the following techniques. The em unit

font-size:1.2em is equal to font-size:12px

font-size:1.4em is equal to font-size:14px

And so on. After the initial font-size=62.5%, there is only a 10-fold difference between the em and px units to facilitate calculation and setting. em length value is used.

The em unit has the following characteristics:

1. The value of em is not fixed;

2. em will inherit the font of the parent element size.

If we want to use em as the unit when writing CSS, we need to pay attention to two points:

　1. Declare Font-size=62.5% in the body selector;

2. Divide your original px value by 10, and then change to em as the unit;

　3. Recalculate the em value of the enlarged fonts. Avoid repeated declarations of font sizes.

That is to avoid the phenomenon of 1.2 * 1.2= 1.44. For example, if you declare the font size to be 1.2em in #content, then the declared font size can only be 1em, not 1.2em, because this em is not the other em, and it changes due to inheriting the font height of #content. For 1em=12px.

However, the exception is 12px Chinese characters. The 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE, but are slightly larger. This problem has been solved by Jorux. Just change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. I don't know if there is any other explanation.

Recommended web page unit

Therefore, it is recommended to use PX (pixel) as the web page production unit to avoid unit conversion errors.

The above introduces you to the px em pt unit and the conversion method. Generally, the length unit we use now uses px as the length unit. Here we also recommend using px (pixels) as the size and length unit of the web page, which is in line with the browser's pixel unit and also for the convenience of calculating the length size.

About px pt em unit summary

1), recommend px pixel as the unit: usually we use px (pixel as the unit) more, followed by the em unit, usually it is recommended that everyone use px as the unit Unit;

2), our display resolution is in px pixels;

3), our QQ screenshots are also in px pixels.

We will introduce the units of HTML here. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the

tag of html

##How to write the html document type declaration

How to enter space characters in HTML

The above is the detailed content of What units of measurement are there in html?. For more information, please follow other related articles on the PHP Chinese website!