Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is em". In daily operation, I believe many people have doubts about what is em. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is em?" Next, please follow the editor to study!

What is em?

Em refers to a high font, and the default font height for any browser is 16px. So all unadjusted browsers match: 1em=16px. So 12px=0.75em 10px=0.625em. To simplify the conversion of font-size, you need to declare Font-size=62.5%, in the body selector in css, which changes the em value to 16px*62.5%=10px, so 12px=1.2em, 10px=1em, that is, you just need to divide your original px value by 10 and replace it with em.

Em has the following characteristics:

1. The value of em is not fixed

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

Rewrite steps:

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

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

Simple. If only the above two steps were needed to solve the problem, no one would use px. After the above two steps, you will find that the font of your website is unimaginably large. Because the value of em is not fixed and inherits the size of the parent element, you may set the font size to 1.2em, that is, 12px, in the content div. Then you set the font size of selector p to 1.2em, but if p is a child of content, the font size of p is not 12px, but 1.2 m = 1.2 * 12px=14.4px. This is because the font size of content is set to 1.2em, which inherits the size of its parent element body, that is, 16px * 62.5% * 1.2=12px, while p as its child, em inherits the font height of content, that is, 12px. So the 1.2em of p is no longer 12px, but 14.4px.

3. Recalculate the em values of those enlarged fonts. Avoid repeated declaration of font size, that is, to avoid the phenomenon of 1.2 * 1.2 = 1.44 mentioned above. 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.

At this point, the study of "what is em" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.