开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

文章概览

• 像素百分比
• 像素的常用单位

像素和百分比

 像素是一个长度单位，屏幕实际上就是由数个像素点组成，像素越小，屏幕越清晰，因此，同样数目的像素点在不同的设备上显示效果不一样，例如200px在越大的屏幕上显示效果越不清晰。

 百分比可以将属性设置为相对于其父元素属性的百分比，设置百分比可以让子元素伴随父元素的变化而变化。

常用单位

• em是相对于元素的字体大小来进行计算的，会根据字体的大小进行改变（1em = 1font-size）。
• rem是相对于根元素的字体大小来进行计算的。

颜色单位

• CSS中可以使用颜色名来设置颜色，例如red、orange、yellow等。
• 直接使用颜色名来使用颜色并不方便，因为颜色太多了，因此还可以使用RGB值。
• R表示red、G表示green，B表示blue。每种颜色的范围在0-255之间。

RGB语法

RGB(红色，绿色，蓝色)

background-color:rgb(22,33,44);

RGBA

• 在RGB的基础上增加的A表示不透明度。
• RGBA需要四个值，前三个与RGB语法相同，但是最后一位表示不透明度，1表示完全不透明，0表示完全透明，5表示半透明。

十六进制的RGB值

• 语法：#红色绿色蓝色
• 颜色浓度通过 00-ff来表示。
• 当颜色的两位重复时可以进行简写即：#aabbcc-#abc

HSL值 HSLA值

• H表示色相，取值范围：0-360
• S表示饱和度，表示颜色浓度，取值范围：0%-100%
• L表示亮度，表示颜色的亮度，取值范围：0%-100%

HSL和HSLA在开发中并不常用，在此只做了解。