1.单位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box1{
/*
*
* 长度单位
*
* px(像素)
* - 我们的屏幕实际上是由一个一个的小点点构成的，一个小点点就是一个像素
* - 不同的显示器中单个像素的大小是不同的，越清晰的显示器单位像素就越小
* - 像素是开发中用的最多的单位
*
* %(百分比)
* - 也可以将长度设置一个百分数，此时元素的长度将会根据父元素的对应属性去计算
* - 使用百分比的值，元素会自动根据父元素的属性去计算长度，
* 当父元素的值发生变化时，子元素会随之等比例变化
* 在一些自适应的页面中，会大量的使用百分比的值
*
*
* 颜色单位
* - 在CSS可以直接使用颜色的单词来为元素设置颜色
* - 但是仅仅使用颜色的单词来表示颜色，使用起来不太方便
*
* - 也可以使用RGB值来设置颜色
* - 所谓的RGB就是光的三元色Red Green Blue
* - 通过这三种颜色的不同的浓度可以组合出任意的颜色
* - 语法：
* rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 浓度可以指定一个0-255之间的值，
* 0 表示没有 255表示最大
* - 浓度也可以接收一个百分比0% - 100%
* - 最终百分比也会转换为0-255
* 0% 0
* 100% 255
*
* - 十六进制的RGB值
* - 可以使用三组两位的十六进制的数字来表示RGB值
* - 语法：#红色绿色蓝色
* - 十六进制
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 ~ ff
* 00 表示 没有
* ff 表示 最大
*
*
* - 如果十六进制的RGB值，两位两位是重复的
* 像 #aabbcc #112233
* 可以进行简写
* #aabbcc --- > #abc
* #112233 --- > #123
*
*/
width: 200px;
height: 200px;
/*background-color: rgb(9,126,84);*/
/*background-color: rgb(100%,0%,0%);*/
/*background-color: #ff0000;*/
/*background-color: #FFFAE8;*/
/*background-color: #abc ;*/
background-color: #bfa;
}
/*.box2{
width: 50%;
height: 50%;
background-color: yellow;
}*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta 
