定义与用法
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,代表透明度越低
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作为移动端的主流单位,可以很好的来控制整个页面的元素大小比例。