我知道2em将元素的计算字体大小增加了一倍.但在这种情况下,它似乎不是这样工作的.

(镀 chromium )

Styles

  <style>
    p {
      font-size: 24px;
    }
    .go-big {
      font-size: 2em;
    }
  </style>

HTML

  <p>This should be 24 px</px>
  <p class="go-big">This should be 48 px?</px>

我这里有一个工作示例:https://stackblitz.com/edit/js-em-question-deborahk

由于<p>元素样式设置为24px,我假设添加一个font-size2em的类将使字体大小加倍,达到48px.但它似乎将默认字体大小(16到32px)增加了一倍.

这是虫子吗?还是这些风格的继承方式?

推荐答案

根据documentationem是指我父母的字体大小(当涉及到像fontSize这样的排版属性时).

父级的字体大小,对于字体大小等印刷属性,以及元素本身的字体大小,对于宽度等其他属性.

go-bigbody元素的直接子元素,因此它font-size:2em表示(正文的2*字体大小).

你可以测试这个link,我把字体大小改为24px,现在它正确地显示了48px(2em).

Css相关问答推荐

如何使搜索框扩展并溢出其他内容

在react native中应用阴影

容器内的中心固定元件

在最小和最大视口之间时具有固定值的 CSS 钳位

CSS 内联 Flex 和段落换行

如何取消 CSS 伪类中的属性设置?

当弯曲方向设置为列时如何制作等高卡片?

排除特定元素的目标元素

Tailwind CSS 不输出背景类

Img 未拉伸以满足所需的纵横比

我想在视频上使用混合混合模式的 svg

应用填充时边框无法正常工作

和号 (&) 作为 SASS @mixin 中的变量

使用 node-sass 在压缩文件末尾添加 min.css 文件扩展名

如何仅包装左侧内容

在样式化组件中使图像重叠

使用之前和之后为锚标签添加画笔描边效果

CSS中的旋转地球

使用 float:left 后如何获得新行?

单选按钮和标签显示在同一行