像素和百分比
.box1{
/*
长度单位：
像素
-屏幕（显示器）实际上是由一个一个的小点点构成的
-不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
-所以同样的200px在不同的设备下显示效果不一样
百分比
-也可以将属性值设置为相对于其父元素属性的百分比
-设置百分比可以使子元素跟随父元素的改变而改变
em
-em是相对于元素的字体大小来计算的
-1em = 1font-size （一般默认一个字的大小为16px）
-em会根据字体大小的改变而改变
rem
-rem是相对于根元素的字体大小来计算的（即rem是相对于html样式来计算的，你在其他样式里设置字体大小font-size怎么变，都改变不了width ：（）rem；或height：（）rem；）
比如你要设置html{ （只有设置html的样式才能改变rem）
font-size：30px；
}
*/
width:200px;
height:200px;
background-color:orange;
}
.box2{ (我在这里把它写成width：50%；height：50；background-color：blue； width相对于父元素的width，百分之50就是200px的一半，就是100px，height相对于父元素的height，百分之50就是100px。)
width：100px;
height：100px；
background-color：blue
}
.box3{
font-size：30px； （如果我这里设置了字体大小为30px，那么width：10em；就等于10 font-size，就等于10*30=300px；）
width:10em;
height:10em;
background-color:greenyellow;
}
RGB值
/*
颜色单位：
在css中可以直接使用颜色名来设置各种颜色，
比如：red,orange,blue,yellow,green----------
但是在css中直接使用颜色名是非常的不方便
RGB值：
-RGB通过三种颜色的不同浓度来调配出不同的颜色
-R red，G green ，B blue
-每一种颜色的范围在 0 - 255 （0% - 100%）之间
-语法：RGB（红色，绿色，蓝色）
例如：
RGBA：
-就是在rgb的基础上增加了一个a表示不透明度
-需要四个值，前三个和rgb一样，第四个表示不透明度
1表示完全不透明 0表示完全透明 .5半透明
十六进制的RGB值：
-语法：#红色绿色蓝色
-颜色浓度通过 00-ff （ff十六进制）
-如果颜色两位两位重复可以进行简写
#aabbcc --> #abc
HSL值 HSLA值
H 色相（0-360） （0和360都一样，相当于是一个环）
S饱和度，颜色的浓度 0% - 100%
L亮度，颜色的亮度 0% - 100%（100%最亮就相当于白色的了，闪瞎狗眼）
*/
background-color：rgb（255，0，0）；
background-color：rgb（0，255，0）；
background-color：rgb（0，0，255）；
background-color：rgb（106，153，85）；
background-color：rgba（106，153，85，.5(半透明)）；
background-color：ff0000；（红色）
background-color：ffff00；（黄色） 比如这个也可以写成 background-color：ff0；
background-color：hsla（98，48%，40%，0.658（透明度））；
