【前端面试之CSS】em/px/rem/vh/vw的区别

阿卡内

已于 2022-08-04 22:30:05 修改

阅读量243

点赞数

分类专栏： CSS系列知识点文章标签： css 前端 css3

于 2022-08-02 16:31:59 首次发布

本文链接：https://blog.csdn.net/qq_40695234/article/details/126124442

版权

CSS系列知识点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的相对长度单位em、rem、vw和vh，以及它们与绝对单位px的区别。em基于父元素字体大小，rem基于根元素html的字体大小，而vw和vh则分别根据视口宽度和高度来定义元素尺寸。在响应式设计中，这些单位能实现灵活的布局。通过实例展示了不同单位在实际应用中的效果，强调了在不同场景下选择合适单位的重要性。

摘要由CSDN通过智能技术生成

在css单位中，可以分为长度单位、绝对单位。

css单位
相对长度单位	em、ch、rem、vw、vh、%
绝对长度单位	Cm、px

Px

表示像素，所谓像素就是呈现在显示器上的一个小小的点，每一个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。

Em

相对单位。相当于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸(1em=16px)
如果把body的字体设置为10px，那么em的长度就会变。下面这个图的宽高变成了100px。

<style>
 body {
        font-size: 10px;
    }
    #box {
        width: 10em;
        height: 10em;
        background-color: red;
    }
</style>

<body>
    <div id="box">
        哈哈哈哈哈哈哈哈哈哈哈
    </div>
</body>

在这里插入图片描述

Rem

相对单位。相对的只是HTML根元素font-size的值。相对的只是HTML根元素font-size的值（与em不同的一点）

html {font-size: 62.5%;  }

rem跟em是不一样的，如果还是用font-size: 10px;这种形式，rem还是默认的长度。如图所示：
在这里插入图片描述
如果改为html {font-size: 62.5%; } ，宽高就是100px，

注意：这里有一点需要注意的是他相对的是根节点html的字体大小来计算，如果说给body加就不会有任何的改变。

Vh、vw

vw就是根据窗口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为窗口的高度。
相对于窗口位置，这一点很重要
body的高度不起任何作用。当页面的放大缩小，box的宽高会随之发生改变。

body {
        /* font-size: 62.5%; */
        width: 1000px;
        height: 1000px;
    }

    #box {
        width: 10vw;
        height: 10vh;
        background-color: red;
    }