Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what is the difference between px and em attributes in CSS". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "what is the difference between px and em attributes in CSS" can help you solve the problem.

Explain in detail the characteristics and differences between px and em

Pixel px is the size unit that we often use in defining CSS, while em is often used in foreign websites. What are the differences and characteristics between px and em?

◆ px pixel (Pixel), a unit of relative length. Pixel px is relative to the screen resolution of the monitor.

◆ em is a unit of relative length relative to the font size of the text within the current object. If the current font size for inline text is not artificially set, it is relative to the default font size of the browser.

Therefore, using px to define fonts, it is impossible to use the browser font magnification function.

The default font height for any browser is 16px. All untuned browsers match: 1em=16px. Then 12pxcards 0.75empendium 10pxboxes 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 12pxvalues 1.2emphilic 10pxtransi1em, that is, you only need to divide your original px value by 10 and replace it with em as a unit.

The em attribute in ◆ CSS has the following characteristics

The 1.em value is not fixed

2.em inherits the font size of the parent element.

◆, so when we write CSS, we need to pay attention.

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

two。 Divide your original px by 10 and replace it with em.

3. Recalculate the em values of those enlarged fonts. Avoid repetitive declaration of font size.

That is to avoid the phenomenon of 1.2-1.2-1.44. For example, if you declare a font size of 1.2em in # content, then the font size of p can only be 1em, not 1.2em, because this em is not the other em, it becomes 1em=12px because it inherits the font height of # content.

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

This is the end of the introduction to "what's the difference between px and em attributes in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.