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

This article introduces the relevant knowledge of "how to use the relative unit of em in css". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Em is a relatively common relative unit in CSS, so it is necessary to pay attention to some potholes.

1em is equal to the font size of the current element, unless you are setting font-size

There are many articles saying that 1em is equal to the font size of the parent element! This statement is actually not accurate. Look at the following examples:

Document

Body {

Font-size:16px

}

Div {

Font-size:32px

Padding-bottom:2em

Background-color:aquamarine

}

Will be held apart by padding-bottom, and the height of padding-bottom is 64px, not 32px! This proves that 1em is equal to the font size of the current element (with one exception, as we'll see below).

What is the relationship between font size and length? Isn't the font a square? In fact, the font size is defined as the width of M.

Why does anyone mistakenly think that 1em is equal to the font size of the parent element? This is because if you use em units when setting font-size, font-size is still the default value of inherit, so 1em is also equal to the font size of the parent element. This is a special case when setting up font-size! This special case is easy to understand, after all, I am setting the font size of the current element! How can you use the font size you are setting at the moment as a unit? It's a paradox!

For example, if this paradox really happens, the following situation will happen: the fruit store owner says to you, "I'll pack it for you how many jin of oranges you want", while you say to the boss, "I want twice as many oranges as I finally want" (analogy to setting up font-size:2em). At this time, the fruit store owner is probably going to collapse. How many oranges does he want to pack for you?

To prevent this from happening, if you use a relative unit when you specify a quantity, then this unit must not be relative to the quantity you specify at the moment. You can say to your boss, "I want twice as much as the last customer bought" (analogy to setting up font-size:2em). When you have finished buying oranges, you can say to your boss, "I want some more apples, which is twice as many as the oranges you just bought" (analogy to setting up padding-bottom:2em).

Except for this special case, when other css properties are set, 1em is equal to the font size of the current element.

In the above example, using em when setting up font-size proves the existence of this special case:

Document

Body {

Font-size:16px

}

Div {

Font-size:2em;/*, this is the only business that has changed! , /

Padding-bottom:2em

Background-color:aquamarine

}

The final height is still 64px, because when setting font-size, 1 emails 16px; when setting padding-bottom, 1em equals 32px.

What if the font-size on the root element uses em? It has no parent element! It doesn't matter, for inheritedproperties (including font-size), the default value on the root element is initial, and for most browsers, the initial value of font-size is 16px. So when you set the font-size on the root element, its value is still 16px, and 1em is equal to 16px.

Document

Html {

/ * 2*16px=32px*/

Font-size:2em

}

Div {

/ * 2*32px=64px*/

Font-size:2em

/ * 2*64px=128px*/

Padding-bottom:2em

Background-color:aquamarine

}

This is the end of the content of "how to use the relative unit of em in css". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.