CSS EM2024 年 8 月 29 日 | 阅读 3 分钟 “em”这个术语源自排版界一个叫做“瞬时单位”的概念。举个例子，对于一个 16 点的字体，1em 就是 16 点，2em 就是 32 点，以此类推。 Em 是 CSS 中的一个相对单位，用于衡量当前元素相对于其父元素的大小。当前元素的大小正好是 1em，2em 时是 2 倍，3em 时是 3 倍，以此类推。 em 单位最常用于 HTML 元素的 font-size CSS 属性。em 可以用于任何需要尺寸的属性，例如 padding、margin、line-height、height、width、max-height 和 max-width。 Em 单位如何工作为了更好地理解 em 单位的工作原理，我们先来讨论一下 CSS 中固定单位和相对单位的区别。 CSS 固定单位如果我们希望所有浏览器和设备都能以我们定义的像素值精确显示 HTML 页面中的文本（或其中的 UX 元素），那么我们可以使用固定单位来指定 font-size 属性，而无论屏幕大小或分辨率如何。 在 CSS 中，HTML 元素的 font-size 属性的默认固定单位是像素 (px)。例如，假设一个元素的字体大小被设置为 12px。在这种情况下，该元素内及其任何后代元素中的所有文本，除非另有定义，否则将具有精确的 12 像素字体大小。 CSS 相对单位相反，如果我们希望浏览器和设备以可变大小显示 HTML 文档中的文本，则应为 font-size 属性使用相对单位。 顾名思义，font-size CSS 属性根据其父元素的字体大小来设置文本的大小。 如果父 HTML 元素的字体大小留空，浏览器会向上搜索 DOM 树以查找固定值。如果 DOM 树中没有固定值，则使用浏览器的默认值，通常是 16px。 在上例中，body 标签具有固定的字体大小 14px。分别
如果我们仍然需要为 body 指定 14 像素的字体大小，该怎么办？正如我们已经提到的，大多数浏览器默认会将字体大小设置为 16 像素（除非用户或浏览器开发者选择了不同的数字）。 比较分析觉得理解 CSS 中的 em 单位有困难？ 不止我们有这种感觉。它们如此，嗯，瞬息万变，这让许多新手网页开发者感到畏惧。为了（希望）使事情变得更简单，让我们将其与数学进行比较。 如果您将 em 替换为 x，并将 CSS 表达式视为数学计算，那么“em”将变得更加容易理解。 假设我们的 DOM 元素父元素的字体大小是 14 像素 em = 14px 我们使用以下公式来确定 2em、3em、4em 等 em = 14px 2 em = 2 * 14 px = 28 px 3 em = 3 * 14 px = 42 px 结论em 单位是一种相对单位，它通过与其父元素的大小来衡量 CSS 属性的大小。如果您从本文中只记住一件事，那就是这个。 通过使用 em 来设置我们网站的 font-size CSS 属性，我们不再需要在所有地方使用预设的字体大小，这使得扩展和自定义我们的设计更加容易。 下一主题CSS 样式表 |
我们请求您订阅我们的新闻通讯以获取最新更新。
我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题
G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India
Python
Java
JavaScript
SQL
C
C++
HTML
CSS
React
Node.js
Spring Boot
C#
PHP
MySQL
MongoDB
AI
ML
DSA
DBMS
OS
Aptitude
Reasoning