长度单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: red;
}
.box1{
font-size: 20px;
/*em数值根据当前元素字体大小变化而变化*/
width: 2em;
/*百分比随着父元素变化而变化*/
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
/*
* 颜色单位:
* 在CSS可以直接使用颜色的单词来表示不同的颜色
* 红色:red
* 蓝色:blue
* 绿色:green
* 也可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色,
* 通过这三种颜色的不同的浓度,来表示出不同的颜色
* - 例子:rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值,255表示最大,0表示没有
* - 浓度也可以采用一个百分数来设置,需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
* 也可以使用十六进制的rgb值来表示颜色,原理和上边RGB原理一样,
* 只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色 ,第一组表示红色的浓度,范围00-ff
* 第二组表示绿色的浓度,范围是00-ff
* 第三组表示蓝色的浓度,范围00-ff
* 语法:#红色绿色蓝色
* 十六进制:
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有,相当于rgb中的0
*