Unit in css em_html/css_WEB-ITnose

1. Introduction

The size units in css given in w3cschool are as follows:

Unit description tr>

%

Percent

in

inch

cm

cm td>

mm

mm

em

单位 描述

%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

1em is equal to the current Font size.

2em is equal to twice the current font size.

For example, if an element is displayed in 12pt, then 2em is 24pt.

In CSS, em is a very useful unit because it automatically adapts to the font the user is using.

ex

An ex is the x-height of a font. (x-height is usually half the font size.)

pt

Points (1 pt equals 1/72 inch)

pc

12-point movable type (1 pc equals 12 points)

px

Pixel ( A dot on the computer screen)

You know it is important when you see the most descriptions of em.

em is used to adapt to the font used by the user. 1em is equivalent to the current font size (font-size attribute), and 2em is equivalent to twice the current font size.

h1              { font-size: 2em; margin: .67em 0 }h2              { font-size: 1.5em; margin: .75em 0 }h3              { font-size: 1.17em; margin: .83em 0 }h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu            { margin: 1.12em 0 }h5              { font-size: .83em; margin: 1.5em 0 }h6              { font-size: .75em; margin: 1.67em 0 }h1, h2, h3, h4,h5, h6, b,strong          { font-weight: bolder }

Visible ems are used as relative sizes for specific fonts.

2. Examples

In the article Default Browser Styles, many default styles are in units of em.

Now take one of the default styles as an example.

It can be seen that in addition to font-weight bolding, the title series also has font-size settings and margin reservations. Now let’s take a look at h1’s font-size and margin reservations.

As you can see from the picture above, by default, h1 has font-size:32px;margin-bottom:21.44px; how does this value come from? ? Answer it below.

The relative unit em is relative to the font size of the element itself. The only exception in CSS is the font-size attribute, whose em and ex values ​​refer to the font size relative to the parent element.

Look at the default style of h1 in chrome

The default font-size of h1: 2em, relative to the parent element, here the parent element body font-size:16px; (default value), so calculate the font-size:32px of h1.

The em calculation of other attributes except font-size is relative to the element's own font size. So the calculated value of margin-bottom:0.67em is 0.67*32px=21.44px.

3. Resource links

Rem VS Px

Powerful em in css

The author of this article starof, because of the knowledge itself Changes, the author is constantly learning and growing, and the content of the article is also updated from time to time. In order to avoid misleading readers and facilitate tracing the source, please indicate the source when reprinting: If you have any questions, feel free to discuss with me and make progress together.