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>