rem、em、vh、px各自代表的含义

最新推荐文章于 2024-04-09 12:19:50 发布

W123&

最新推荐文章于 2024-04-09 12:19:50 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_45954770/article/details/126968221

版权

web前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

rem em vh px各自代表的含义

rem：

其他元素相对于根元素，也就是html字体大小

计算方法：根元素字体大小乘rem的值—> 根元素的字体大小为16px，那么10rem就等同于10*16=160px

em:

当使用em的时候，em转为像素的大小取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小影响，除非显式重写与一个具体单位。

计算方法：父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px

注意：

元素的width、height、padding、margin、用em的话是相对于该元素的font-size

<!DOCTYPE html>
<html lang='cn'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
       .box{
        font-size: 20px;
        width: 5em;
        height: 5em;
        margin: 2em;
        padding: 4em;
        border: 1px solid red;
       }
       /* 
       得到了
            width：100px
            height:100px
            margin:40px
            padding:80px
       */
    </style>
</head>
<body>
    <div class="box">
        <div class="child">em</div>
    </div>
</body>
<script>
    
</script>
</html>