CSS 单位
CSS中有各种单位来表示尺寸和长度。 CSS单位用于确定属性大小，我们为元素或其内容设置了大小。需要CSS中的单位来定义度量，例如
margin: 20px; ，其中
px （或像素）是CSS单位。它们用于设置页边距，填充，长度等。
我们不能在数字和单位之间应用空格。值0可以省略单位。CSS的某些属性允许为length的负值。
绝对长度。
相对长度。
绝对长度
这些是固定长度单位，使用绝对单位表示的长度将恰好与该尺寸相同。不建议在屏幕上使用，因为屏幕尺寸变化太大。因此，在已知输出介质（例如打印版面）时，应使用绝对单位。
在项目中未考虑响应性时，绝对单位很有用。它们对响应站点不利，因为它们在屏幕变化时不会缩放。
通常，绝对长度始终被认为是相同大小。绝对长度单位列表如下：
| Unit |
名称 |
说明 |
| cm |
厘米 |
它用于定义以厘米为单位的测量值。 |
| mm |
毫米 |
它用于定义以毫米为单位的测量值。 |
| in |
英寸 |
它用于定义以英寸为单位的尺寸。
1in = 96px = 2.54cm |
| pt |
磅 |
用于定义以磅为单位的测量。
1pt = 1的1/72。 |
| pc |
皮卡 |
它用来定义以皮卡为单位的测量值。
1pc = 12pt因此，有6个皮卡相当于1英寸。 |
| px |
像素 |
用于定义以像素为单位的度量。
1px = 1/96英寸 |
示例
在此示例中，我们将
font-size 属性用于段落，以使用上述绝对值定义值长度单位。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
</style>
</head>
<body>
<h1> Absolute units </h1>
<p style = "font-size: 20px;" > It has a font-size: 20px; </p>
<p style = "font-size: 1.2cm;" > It has a font-size: 1.2cm; </p>
<p style = "font-size: .7in;" > It has a font-size: .7in; </p>
<p style = "font-size: 18pt;" > It has a font-size: 18pt; </p>
<p style = "font-size: 2pc;" > It has a font-size: 2pc; </p>
<p style = "font-size: 10mm;" > It has a font-size: 10mm; </p>
</body>
</html>
输出
相对长度
相对单位可以很好地设置响应站点的样式，因为它们相对于窗口大小或父窗口进行缩放。它们指定相对于另一个length属性的长度。
根据设备的不同，如果屏幕尺寸变化太大，则相对长度单位是最佳的，因为它们在不同的尺寸之间缩放更好渲染媒体。我们可以使用相对单位作为响应单位的默认单位。它有助于我们避免针对不同屏幕尺寸的更新样式。
相对长度单位列表如下：
| Unit |
名称 |
| em |
相对于元素的字体大小。 |
| ex |
相对于元素字体的x高度。很少使用。 x高度由小写字母" x"的高度决定。 |
| ch |
它类似于单位ex，但不是使用字母x的高度，而是测量整数" 0"（零）的宽度。 |
| rem |
它是根元素的字体大小 |
| vh |
相对于视口的高度。
1vh = 1％或视口高度的1/100。
|
| vw |
相对于视口的宽度。
1vw = 1％或视口宽度的1/100 |
| vmin |
相对于视口的较小尺寸。
1vmin =视口较小尺寸的1％或1/100。 |
| vmax |
相对于视口的较大尺寸。
1vmax = 1％或视口的较大尺寸的1/100。 |
| ％ |
用于将度量定义为相对于另一个值的百分比。 |
示例
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align: center;
}
p{
line-height: 0.1cm;
color: blue;
}
</style>
</head>
<body>
<h1> Relative units </h1>
<p style = "font-size: 2em;" > It has a font-size: 2em; </p>
<p style = "font-size: 8ex;" > It has a font-size: 8ex; </p>
<p style = "font-size: 6ch;" > It has a font-size: 6ch; </p>
<p style = "font-size: 4rem;" > It has a font-size: 4rem; </p>
<p style = "font-size: 4vw;" > It has a font-size: 4vw; </p>
<p style = "font-size: 10vh;" > It has a font-size: 10vh; </p>
<p style = "font-size: 10vmin;" > It has a font-size: 10vmin; </p>
<p style = "font-size: 8vmax;" > It has a font-size: 8vmax; </p>
<p style = "font-size: 400%;" > It has a font-size: 400%; </p>
</body>
</html>
输出
CSS单位：时间
某些动画属性需要使用值来表示时间。
| Unit |
说明 |
| s |
这是持续时间，以秒为单位。 |
| ms |
这是持续时间，以毫秒为单位。
1ms = 1/100秒 |
示例
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 200px;
height: 200px;
background: red;
border-radius: 50px;
transition-property: background, width, height;
transition-duration: 1s, 2s, 3s;
}
div:hover
{
width:300px;
background: blue;
height:300px;
border-radius: 80px;
}
</style>
</head>
<body>
<center>
<h2>Hover to see effects.</h2>
<div></div>
</center>
</body>
</html>
输出
CSS单位：角度
CSS中的转换属性要求值以角度表示
| Unit |
说明 |
| deg |
它以度表示角度。 |
| grad |
用旋转表示角度，即1/400转。 |
| turn |
它以角度表示角度，即360度。 |
示例
<!DOCTYPE html>
<html>
<head>
<style>
img
{
border:9px ridge gray;
border-radius:30px;
margin:10px;
transition-duration:2s;
}
#img1:hover{
transform: rotate(30deg);
transform-origin: bottom left 50px;
}
</style>
</head>
<body>
<center>
<img src="lion.png" id="img1"/>
</center>
</body>
</html>
输出
