css中px、em、rem的区别

最新推荐文章于 2024-09-04 10:09:38 发布

crazy的蓝色梦想

最新推荐文章于 2024-09-04 10:09:38 发布

阅读量225

点赞数

分类专栏： CSS基础+布局文章标签： css中的单位

本文链接：https://blog.csdn.net/qq_41257129/article/details/103442028

版权

CSS基础+布局专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前面的话

css单位中分为相对长度单位和绝对长度单位。
在这里插入图片描述
这里主要介绍px、em、rem的区别。

px

px是绝对长度单位，这个平时用了很多，这里不多介绍。

em

em是相对长度单位。元素em的值都会参考父元素的值。

我们知道浏览器的默认字体是16px,那么1em = 16px。推算12px = 0.75em；这样使用很复杂。
为了简化换算，我们在body中写入：
body { font-size: 62.5%} // 16px * 62.5% = 10px
这样页面中的1em = 10px, 1.2em = 12px。这样就简单多了。

缺点：

元素em的值由其父元素决定，值不固定。例如两个元素嵌套，字体设置都为1.2em,那么最里层的元素，实际的值为：1.2*12= 1.44em

<style>
　　body {font-size: 62.5%; } /* 公式:16px*62.5%=10px */
　　.big{font-size: 1.2em}
　　.small{font-size: 1.2em}
</style>
 <div class="big">我是大字体
        <div class="small">我是小字体</div>
  </div>

在这里插入图片描述

rem

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素(html)。
当改变html的font-size那么用rem作为单位的元素的大小都会相应改变。如果做任何处理，根元素的元素大小默认为16px。

<style>
    　html {font-size: 62.5%; } /* 公式:16px*62.5%=10px */
     .big{font-size: 1.6rem}  /* 16px */
    .small{font-size: 1.2rem} /* 10px */
</style>
 
<body>
    <div class="big">我是大字体
        <div class="small">我是小字体</div>
    </div>
</body>