CSS rgba() 函数，em和rem单位

idiot_MAN

已于 2022-07-08 21:10:10 修改

阅读量223

点赞数

分类专栏： HTML 前端文章标签： css 前端 css3

于 2022-07-01 17:12:18 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/125562405

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

HTML

11 篇文章 0 订阅

订阅专栏

定义与用法

rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度（英语：Red, Green, Blue、Alpha）。

红色（R）0 到 255 间的整数，代表颜色中的红色成分。。
绿色（G）0 到 255 间的整数，代表颜色中的绿色成分。
蓝色（B）0 到 255 间的整数，代表颜色中的蓝色成分。
透明度（A）取值 0~1 之间，代表透明度。

#p1 {background-color:rgba(255,0,0,0.3);} /* 红 */
#p2 {background-color:rgba(0,255,0,0.3);} /* 绿 */
#p3 {background-color:rgba(0,0,255,0.3);} /* 蓝 */

em和rem单位em和s阿松大
值
red 定义红色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
green 定义绿色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
blue 定义蓝色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
alpha - 透明度 定义透明度 0（完全透明） ~ 1（完全不透明）注：越接近 1，代表透明度越低

值
red	定义红色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
green	定义绿色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
blue	定义蓝色值，取值范围为 0 ~ 255，也可以使用百分比 0% ~ 100%。
alpha - 透明度	定义透明度 0（完全透明） ~ 1（完全不透明）注：越接近 1，代表透明度越低

em和rem单位

1，em单位

em是一个相对单位，是相对父元素字体大小的。

<style>
    div {
        font-size: 18px;  /* 设置父元素的字体大小 */
    }
    span:nth-child(1) {
        font-size: 1em;   /* 1em相当于1*18px=18px */
    }
    span:nth-child(2) {
        font-size: 18px;
    }
</style>
<body>
    <div>
        <span>em单位如何确定</span><br>
        <span>em单位如何确定</span>
    </div>
</body>

上面的代码两个span标签里面的文字是一样的，虽然第一个span标签设置的字体为1em，第二个span标签设置的字体大小为18px，但是最后得到的效果是一模一样的。

这是因为span的父元素div设置的字体大小为18px，所以1em=18px。

这也间接验证了em单位是相对于父元素而言的。

em先去找自身元素上设置得字体大小，如果有就相对于自身字体大小而言，如果没有，就去父元素上面找

2，rem单位

rem (root em)也是一个相对单位，不同的是rem的基准是相对于html元素的字体大小。

<style>
    html {
        font-size: 30px;    /* 设置根元素字体大小为30px */
    }
    div {
        width: 15rem;      /* div盒子宽度设置为15rem=15*30px=450px */
        height: 2rem;      /* div盒子高度设置为2rem=2*30px=60px */
        background-color: pink;
        font-size: 1rem;   /* div盒子里的文字大小设置为1rem=1*30px=30px */
    }
    span {
        font-size: 30px;
    }
</style>
</head>
 
<body>
    <div>rem单位相对html字体大小</div>
    <span>rem单位相对html字体大小</span>
</body>

比如，上述代码中根元素（html）设置font-size=30px; 然后给div元素设置width:15rem; 则换成px就是450px，高度设置2rem，换算过来为60px，字体大小为1rem，换算过来为30px。上图得到的效果也是验证了rem单位的确是相对于根元素字体大小而言的。

1rem=根元素html设置的字体大小，如刚刚例子中就是1rem=30px

3，em和rem的比较

①em和rem单位都是相对单位，em是根据父元素字体大小而变化，rem是根据html根元素字体大小而变化；

②一个页面父元素文字大小可能不一致，所以1em也就可能代表不一样的大小；但是整个页面只有一个html，所以1rem就等于html元素的字体大小，因此，我们一般使用rem作为移动端的主流单位，可以很好的来控制整个页面的元素大小比例。