热搜：编程 Python Microsoft 编程语言 C++

css中px、em、rem三者的概念与区别

发布时间：2023-07-03 01:12:50 来源：网络

.

夏日的草原，早晨空气格外清新，我缠着父亲在草原上漫步。幽幽的草香迎面拂来，红艳艳。朝阳正从地平线上冉冉升起，为辽阔的草原镀上一层金色。草叶上的露珠，像镶在翡翠上的珍珠，闪着五颜六色的光华。我看到草丛中夹着许多粉红色、白色、黄色或是蓝色的不知名的花，把草原装扮得十分美丽。

在CSS中px、em、rem都是计量单位都能表示尺寸，来标识字体的大小，但是他们之间是有所不同的，各有各的优缺点，下面就大略的说一下。

css px

1、px：像素，相对于显示器屏幕分辨率而言的。

2、其作为单位是固定不变的，不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

css em

1、em：其值是不固定，只会继承父元素的字体大小。

2、如果其父亲的字体改变，其也会相应的进行改应

css rem

1、rem：是css3中新增的相对单位。

2、其继承html根元素的字体大小。

3、可以通过修改根元素字体大小就来调整其大小

4、浏览器的字体在其未定义之前默认为 16 px

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .em{
                width: 10em;/* 10em = 8 * 10 */
                height: 10em;
                background-color: red;
            }
            .rem{
                width: 10rem;/* 10rem = 16 * 10 */
                height: 10rem;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="box" style="font-size: 8px;">
            <div class="em">em</div>
            <div class="rem">rem</div>
        </div>
    </body>
</html>

运行结果：

css中px、em、rem三者的概念与区别