<!DOCTYPE html>
<html>
<head>
<title>單位</title>
<style>
/*
長度單位
1.像素：
-屏幕實際上是一個一個的小點點構成的。-不同屏幕的像素大小是不同的，像素屏幕 越小越清晰。
-所以同樣的200像素在不同的設備下顯示。
*/
.box1{
width: 200px;
height:200px;
background-color:pink;
}
/*
2.百分比：
-百分比可以設置屬性相對於父元素屬性的百分比。
-設置百分比可以使子元素隨父元素的改變而改變。
*/
.box2{
/*這裏100px和50%效果一樣*/
/*width: 100px;
height:100px;*/
width:50%;
height:50%;
background-color:purple;
}
/*
3.em:
-em是相對於元素的字體大小來計算的。
-1em=1font-size
-em會根據字體大小的改變而改變
一個em就是一個字的大小，10個em就是10個字大小。
一個字是30個像素，10個字就是300給像素。
*/
.box3{
width:10em;
height:10em;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<div class="box3"></div>
</body>
</html>
還要一個rem，rem和em就是參照物不同：
<!DOCTYPE html>
<html>
<head>
<title>單位</title>
<style>
html{
font-size: 20px;
}
/*
4.rem:
-rem是相對於根元素的字體大小來計算的。
*/
.box3{
width:10rem;
height:10rem;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
<div class="box3"></div>
</body>
</html>
RGB:
<!DOCTYPE html>
<html>
<head>
<title>RGB</title>
<style>
.box1{
width:100px;
height:200px;
/*
顏色單位：
-在css中可以直接使用顏色來設置各種顏色，但是直接用顏色名是非常不方便的，爲解決該問題就可以使用RGB值。
RGB值：
-RGB通過三種顏色的不同來調配出不同的顏色。
-R red；G green；B blue。
-每一種顏色的範圍在0-255(0%-100%)之間。
-語法：RGB(紅色，綠色，藍色)
-可以跳出255*2558255種顏色。
RGB(255,255,255):白色;RGB(0,0,0):黑色;
*/
background-color: RGB(0%,0%,100%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
RGBA:
<!DOCTYPE html>
<html>
<head>
<title>RGB</title>
<style>
.box1{
width:100px;
height:200px;
/*
RGBA比RG多一個參數，爲透明度。
1表示完全不透明，0表示完全透明，.5表示半透明。
*/
background-color: rgba(100,23,45,1);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
十六進制的RGB值：
<!DOCTYPE html>
<html>
<head>
<title>RGB</title>
<style>
.box1{
width:100px;
height:200px;
/*十六進制的RGB值：
-語法：#紅色綠色藍色，每兩位表示一種顏色。
-顏色濃度：00-ff
-如果顏色顏色兩位兩位重複，可以簡寫。如：#aabbcc簡寫成abc.
*/
background-color: #ff0000;
background-color: #bfa;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
HSL：
<!DOCTYPE html>
<html>
<head>
<title>HSL值</title>
<style>
/*
HSL值 HSLA值
H:色相，取值0到360;
S:飽和度,顏色的濃度0%到100%.
L:亮度，0%到100%。0%爲黑色，100%爲白色。
*/
.box1{
width: 200px;
height: 200px;
background-color: hsl(30,100%,50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>