How to express length in html? Several common length representation methods in html

#How to express length in html? What are some common length representation methods in HTML? This article brings you content about the HTML medium length method. I hope it will be of some help to you.

The following is a summary of pCSS5’s introduction to common html units in web pages and an introduction to length units in css p layout.

In fact, there are 8 length units in CSS, namely px, em, pt, ex, pc, in, mm, cm;

px: pixel (Pixel), relative to the length unit of the device, pixels are relative to the display screen resolution. For example, the resolution used by WONDOWS users is generally 96 pixels/inch. The resolution used by MAC users is generally 72 pixels/inch.
em: Relative length unit. The font size relative to the text within the current object. If the font size of the current inline text has not been manually set, it is relative to the browser's default font size.
ex: Relative length unit. Height relative to character "x". This height is usually half the font size. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.
pt: Point, absolute unit of length.
pc: Pica, absolute unit of length. It is equivalent to the size of my country's new No. 4 type.
in: Inch, absolute unit of length.
mm: Millimeter, absolute unit of length.
cm: Centimeter, absolute unit of length.

Among them: 1in = 2.54cm = 25.4 mm = 72pt = 6pc;

We often use px as the unit for the size of the container, and everyone has no objection. The font size (font-size) is many domestically Many people use px as the unit. In fact, the only fatal disadvantage of using px as the font unit is that the browser font scaling function cannot be used under IE. Or hold down Ctrl and scroll the middle wheel of the mouse.

So many people suggest using html em units. For people who are used to using px, it is definitely not very convenient to use em. Here are some conversion formulas and comparison tables for your reference:

px to em :Example: 12px / 16px = .75em
px to %:Example: 12px / 16px * 100 = 75%
px to pt:Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
em to px:Example: .75em * 16px = 12px
em to %:Example: .75em * 100 = 75%
% to px:Example : 75 * 16px / 100 = 12px
% to em:Example: 75 / 100 = .75em
pt to px:Example: 12pt * 96ppi / 72ppi = 16px

##9px0.563em56.3%7pt##10px11px12px13px14px15px16px##17px1.063em106.3% 13pt18px1.125em112.5%14pt19px1.188em118.8%14pt20px1.25em 125%15pt21px1.313em131.3% 16pt22px1.375em137.5%17pt1.438em1.5emFinally pCSS5RecommendationUse

Pixels	EMs	Percent	Points
6px	0.375em	37.5%	5pt
7px	0.438em	43.8%	5pt
8px	0.5em	50%	6pt
0.625em	62.5%	8pt
0.688em	68.8%	8pt
0.75em	75%	9pt
0.813em	81.3%	10pt
0.875em	87.5%	11pt
0.938em	93.8%	11pt
1em	100%	12pt
			##23px
143.8%	17pt		24px
150%	18pt

PX pixels

to lay out the web page in units: Personally think that the disadvantage of using px as the font unit and not being able to use the browser font scaling function under IE is no longer so important. Because the new versions of IE7 and IE8 already support the zoom function of the entire web page, including Firefox, which zooms the entire web page by default instead of scaling CSS fonts. Is there any significance in not simply scaling the font size? For more related tutorials, please visit:

http://www.php.cn/course/list/11.html

The above is How to express length in html? A complete introduction to several common length representation methods in HTML. If you want to know more about HTML tutorials, please pay attention to the PHP Chinese website.

The above is the detailed content of How to express length in html? Several common length representation methods in html. For more information, please follow other related articles on the PHP Chinese website!