<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
.box1 {
width: 10em;
height: 10em;
background-color: black;
}
.box2 {
width: 10rem;
height: 10rem;
background-color: #00ff00;
}
.box3 {
width: 50px;
height: 50px;
background-color: rgba(255,000,255);
}
.box4 {
width: 50px;
height: 50px;
background-color: rgba(255,000,255,0.5);
}
.box5 {
width: 50px;
height: 50px;
background-color: HSL(0,40%,50%);
}
.box6 {
width: 50px;
height: 50px;
background-color: HSLA(0,40%,50%,0.3);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
大小单位
- em:是相对于字体的大小来计算的,1em=1font-size默认=16px;
- rem:相对于根元素的字体大小来计算;默认为16px;
颜色单位
- RGB值:通过三种颜色不同的浓度来调配出不同的颜色;R-red;G-green;B-blue;
- 每一种颜色都是0-255(0%~100%)之间;RGB(red,green,blue),按照光的颜色来调,全没有为黑,全满为白;
- RGBA:比RGB增加了一个值:透明度,0~1之间;RGBA(red,green,blue,透明度);
- 十六进制的RGB值:#红色绿色颜色;颜色浓度:00-ff之间;两位两位重复可以简写;
- HSL值:H色相(0-360),S饱和度,颜色浓度(0%-100%),L亮度(0%-100%)
- HSLA值:多一个透明度(0-1)