em...... em和rem有啥子区别？来，今儿一下子弄懂了所有单位。

最新推荐文章于 2024-05-18 06:08:21 发布

小新浪浪

最新推荐文章于 2024-05-18 06:08:21 发布

阅读量247

点赞数

分类专栏：深入理解CSS 文章标签： css css3

本文链接：https://blog.csdn.net/Jasper917/article/details/105795658

版权

深入理解CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

哈喽， CSS世界里面里有各种各样的单位: px、pt、in、pc、cm、em、rem…
是不是看到这里就已经有一点点晕了呢？因为CSS支持各类单位，所以才会CSS才会那么多彩缤纷，但同时也使得CSS更难以被深入掌握。无论哪个单位，无外乎就两种类型：绝对单位和相对单位。下面进入正文，来看看他们各自的特点以及在何种环境下选择最优的一个。

绝对单位：px

这里只介绍最常用的绝对单位px, 因为其他的绝对单位像pt、pc 和 in 都极少被使用而且它们的性质和px是一样的理解了px 就等同于理解了他们。
px 是我们最常用的单位，对于大多数新手来说，他们就只接触了这一种单位。一个px 就是一个像素点，但是CSS里面的一个像素不完全等于屏幕的一个像素，会根据显示器、浏览器或操作系统的不同而有所改变。但是无论如何改变也不会相差太大，尤其对于UI设计师来说， px 是他们设计页面的通用语言，当你作为一个前端工程师和UI设计师交流的时候就一定要使用px来沟通才能完美还原产品设计。在CSS里面，所有的相对单位都会先转换为px 然后才被浏览器渲染出来，所以px 相当于一个重要的桥梁，通过它你可以直接和UI设计师和浏览器沟通。

相对单位：em, rem, vh, vw, vmin, vmax

相对单位可以说是CSS里面最常用的单位，因为他们是无比强大的，所有响应式网站都会用到它。

em: em 基于当前元素的font-size值，如果当前元素的font-size 值没有被设置那么会找到上一级的font-size值，如果还是没有就会一直往上找直到根元素的font-size。 1 em = 1 font-size，如果你设置当前font-size 为20px, 那么在这个元素里面1 em = 20px。如果font-size也用em，那么这里的1em会等同于它父元素的font-size值，没有的话就依次往上找，然后将它转化为px。

 <p class="part1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde veniam quam dolore ullam assumenda similique?</p>
  <p class="part2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde veniam quam dolore ullam assumenda similique?</p>

:root {
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

p{
    border: blue solid 1px;
    padding: 1.2em;
    border-radius: .6em;
    margin: auto;
    width: 600px;
}

.part1 {
    font-size: 1em;
}

.part2 {
    font-size: 20px;
    margin-top: 16px;
}

在这里插入图片描述
在这里，我们只需要一行代码去改变第二个p标签的font-size就同时改变了它的padding值和border-radius值。在第二个p标签当中，对于padding: 1.2 X 20 = 24px；对于 border-radius： 0.6 X 20 = 12 px；而对于第一个, 先计算他的font-size值， font-size = 1 X 14 = 14px， padding = 1.2 X 14 = 16.8px, border-radius = 0.6 X 14 = 8.4 px;相当于放大的用来的 20/14 倍。

rem: rem 基于根的font-size值，其余的用法和em一模一样。

:root {
    font-size: 14px;
}

* {
    box-sizing: border-box;
}

p{
    border: blue solid 1px;
    padding: 1.2rem;
    border-radius: .6rem;
    margin: auto;
    width: 600px;
}

.part1 {
    font-size: inherit;
}

.part2 {
    font-size: 20px;
    margin-top: 16px;
}

在这里插入图片描述
在这里，第一个没有变，但是计算过程却不一样了，因为不用先计算自己font-size 值，所以padding = 1.2 X 14 = 16.8px, border-radius = 0.6 X 14 = 8.4 px；
第二个和第一个也是一样的，它没有放大时因为它只与根部的font-size值有关而与本身的font-size值无关。