css中的 px, em,rem的特点与区别

最新推荐文章于 2022-09-24 22:10:29 发布

邱小健

最新推荐文章于 2022-09-24 22:10:29 发布

阅读量297

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_41473887/article/details/88862770

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

px:（固定不变的）

px 是 pixel 的缩写，它的含义是像素的意思，在指定字体大小和元素的宽高的时候使用。像素是相对于显示器屏幕分辨率而言的

em:（相对于父元素的）

em是一个相对长度的单位，是相对于当前对象内文本的字体尺寸。如过我们未设置当前文本的字体尺寸，那么em就会相对于浏览器的默认字体尺寸

//em的值时相对于父元素，修改.a的大小，.b的大小会随之发生变化    
<style>
        .a{
            font-size: 4px;  //1em=4px
        }
        .b{
            font-size: 2rem;   //这里就8px;
        }
    </style>
</head>
<body>
    
    <div class="a">
        <p class="b">
            51515
        </p>
    </div>

</body>

rem：（相对于根元素的即HTML）

rem是CSS3中新增的一个相对单位，它与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。它的使用非常简单，通过改变根元素的大小就可以改变它的值(rem和em是类似的，就是相对的元素不一样)

ps:为了方便处理我们还可以对px进行简单的处理.

一般浏览器默认字体的大小是16px=1em,可以修改值16*0.625=10；