CSS学习--值与单位

值与单位

color值

1. 十六进制：

#F09
#FF0099

2. rgb

   RGB()—它有三个参数，表示颜色的红色、绿色和蓝色通道值

rgb(255, 0, 153.0)
rgb(100%,0%,60%)

3. rgba

rgba(51 170 51 / 0.4) /* 40% opaque green */
rgba(51 170 51 / 40%) /* 40% opaque green */

4. hsl

   hsl()—函数接受色调、饱和度和亮度值作为参数

hsl(270 60% 70%)
hsl(270deg, 60%, 70%)
hsl(4.71239rad, 60%, 70%)
hsl(.75turn, 60%, 70%)

5. hsla

hsla(240 100% 50% / .05) /* 5% opaque blue */
hsla(240 100% 50% / 5%) /* 5% opaque blue */

长度单位

绝对长度单位

单位	名称	换算
cm	厘米	1cm = 96/2.54px
mm	毫米	1mm = 1/10th of 1cm
Q	四分之一毫米	1Q = 1/40th of 1cm
in	英寸	1in = 2.54cm = 96px
pc	十二点活字	1pc = 1/16th of 1in
pt	点	1pt = 1/72th of 1in
px	像素	1px = 1/96th of 1in

• in - > pc -> cm -> pt -> px -> mm -> Q
• 1in = 16pc = 25cm = 72pt = 96px = 250mm = 1000Q

相对长度单位

单位	相对于
em	在 font-size 中使用是相对于父元素的字体大小， 在其他属性中使用是相对于自身的字体大小，如 width
rem	根元素的字体大小
ex	字符“x”的高度
ch	数字“0”的宽度
lh	元素的line-height
vw	视窗宽度的1%
vh	视窗高度的1%
vmin	视窗较小尺寸的1%
vmax	视图大尺寸的1%

百分比

width: 80%;

数字

opacity: 0.5;

图片

background-image: url('./../1.jpg');

位置

background-position: top 5px left 5px;

字符串和标识符

/* 带引号是字符串 ，不带引号是标识符 */
$color:('red': red);

函数

width: calc(100% - 20px);