<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单位</title>
<style>
/*
长度单位:
像素
屏幕(显示器)实际上是由若干个像素点组成
不同屏幕的像素大小是不同的,像素越小的屏幕显示效果越细腻
所以同样的200px在不同的设备下显示效果不一样
百分比
也可以将属性值设置为相对于其父元素属性的百分比
设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对于元素的字体大小来计算的
1 em = 1 font-size
em会根据字体大小的改变而改变
rem
rem是相对于根元素(html)的大小来计算
颜色单位(RGB)
在CSS中可以直接使用颜色名来设置各种颜色
比如:red,orange,yellow,blue……
但是在CSS中直接使用颜色名是非常的不方便
RGB值:通过三种颜色的不同浓度来调出不同的颜色
R:red,G:green,Bblue
每一种颜色的范围在0~255(0%~100%)之间
语法:RGB(red,green,blue)
RGBA
在RGB的基础上增加了一个a表示不透明度
需要四个值,前三个和rgb一样,第四个表示不透明度
例如:1表示完全不透明,0表示完全透明,5表示半透明
十六进制的RGB值
语法:#RGB
颜色浓度范围 00~ff
如果颜色两位两位重复可以进行简写
例:#aabbcc --》 #abc
HSL与HSLA值
H 色相(0~360)
S 饱和度,颜色的浓度(0~100)
L 亮度,颜色的亮度(0~100)
*/
html{
font-size: 50px;
}
.Class1{
width: 200px;
height: 200px;
background-color: tomato;
}
.Class2{
width: 100%;
height: 100%;
background-color: rgb(68, 230, 213 ,30%);
}
.Class3{
font-size: 20px;
width:10em; /* 因为字体为20px,故10em相当于200px */
height:10em;
background-color:wheat;
}
.Class4{
width: 5rem; /* 因为根元素的字体为50px,故5rem相当于250px */
height: 5rem;
background-color: yellow;
}
.Class5{
width: 300px;
height: 300px;
background-color: rgb(230, 193, 124);
color: #bfa;
}
.Class6{
width: 300px;
height: 300px;
background-color: rgba(253, 186, 40, 0.384);
}
</style>
</head>
<body>
<div class="Class1">
<div class="Class2"></div>
</div>
<div class="Class3">What are you 弄啥来?</div>
<div class="Class4"></div>
<div class="Class5">快看啊,做前端的上吊啦!</div>
<div class="Class6">aaa</div>
</body>
</html>
运行结果:
每篇文章皆用心——积跬步,至千里!