1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .box1{
8 /*
9 长度单位
10 像素
11 -屏幕实际上是有一个一个的小点点构成的
12 -不同屏幕的像素的大小是不一样的，像素越小的屏幕显示
的效果越清晰
13 -所以同样的200px在不同的设备下显示效果不一样
14 百分比
15 -百分比可以设置为属性相对于父元素属性的百分比
16 -设置百分比可以是子元素跟随父元素的改变而改变
17 em
18 -相对与元素的字体大小来计算
19 -1em = 1font-size(浏览器默认font-size为10像素)
20 -em会根据字体大小的改变而改变
21 rem
22 -相对于根元素的字体代销来计算
23 颜色单位
24 -在CSS中我们可以使用颜色名来设置各种颜色
25 -RGB值
26 -通过三种颜色的不同浓度来调配出不同的颜色
27 -每一种颜色的范围0-255之间
28 -语法：RGB(红色，绿色，蓝色)
29 RGBA:
30 -就是在rgb的基础上增加了一个a表示不透明度
31 十六进制的RGB值：
32 -语法#红色绿色蓝色
33 -颜色浓度00-ff
34 -如果颜色两位重复可以进行简写
35 eg:aabbcc-->abc
36 */
37 width:200px;
38 height:200px;
39 background:orange;
40 }
41 .box2{
42 width:50%;
43 height:50%;
44 background:red;
45 }
46 .box3{
47 width:10em;
48 height:10em;
49 background:blue;
50 }
51 .box4{
52 width:100px;
53 height:100px;
54 background:rgba(255,0,0,0.5);/*表示半透明*/
55 background:#ffff00;
56 background:#ff0;/*可以进行简写效果同上*/
57
58 }
59 </style>
60 </head>
61 <body>
62 <div class="box1">
63 <div class="box2"></div>
64 </div>
65 <div class="box3"></div>
66 <div class="box4"></div>
67 </body>
68 </html>
