em和rem的区别

最新推荐文章于 2023-02-01 15:04:45 发布

月色失衡

最新推荐文章于 2023-02-01 15:04:45 发布

阅读量347

点赞数

分类专栏： CSS 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/m0_47118763/article/details/127701845

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

em特点

em的值并不是固定的；
em会继承父级元素的字体大小。
em设置基准相对于⽗元素字体大小,确切的说是离他最近的父元素字体大小。看下方例子：

<style>
      div {
        font-size: 20px;
      }
      p {
        font-size: 18px;
      }
      span {
        font-size: 1em;
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <span>我是谁</span>
      </p>
    </div>
  </body>

展示结果：

然而设置em时，子元素是所有属性都是基于父元素字体大小设置的吗？

答案是不是，只有设置font-size：xxxem 时才是基于父元素字体大小,设置其他属性是基于自身元素字体大小，这么说可能有些懵，我们来看看下面的案例

<style>
      div {
        font-size: 20px;
      }
      p {
        font-size: 18px;
      }
      span {
        display: inline-block;
        width: 20em; /*720px,即相对于自身元素字体大小 36*20=720,而不是相对于父元素字体大小,只有font-size设置em时才相对与父元素字体大小*/
        height: 10em;/*360px,若基于父元素字体大小这里应该是10*18=180px,这里显然不是*/
        font-size: 2em; /*36px*/
      }
    </style>
  </head>
  <body>
    <div>
      <p>
        <span>我是谁</span>
      </p>
    </div>
  </body>

展示结果：