CSS长度单位
绝对长度单位
px
px是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。
想要了解更多关于px的内容,可以参考这篇文章
in、cm、mm、pt
- in: 英寸,1in == 96px
- cm:厘米,1cm == 37.8px
- mm:毫米,1mm == 0.1cm == 3.78px
- pt:point,一般用于打印
1in = 2.54cm = 25.4 mm = 72pt = 96px
in、cm、mm、pt,这些也都是绝对长度,但是基本上没有人会用。
相对长度单位
em
em是相对于他的父节点font-size的长度单位,而且会多级节点意味着多级嵌套。
rem
rem为root em,即相对于根节点font-size的长度单位,如下图所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>css长度单位</title>
<style>
html {
font-size: 16px;
}
.em1, .em2, .em3{
font-size: 1.5em;
border: 1px solid #333;
margin: 3px;
}
.rem1, .rem2, .rem3{
font-size: 1.5rem;
border: 1px solid #333;
margin: 3px;
}
</style>
</head>
<body>
<div class="em1">
em1
<div class="em2">
em2
<div class="em3">
em3
</div>
</div>
</div>
<div class="rem1">
rem1
<div class="rem2">
rem2
<div class="rem3">
rem3
</div>
</div>
</div>
</body>
</html>
视窗长度单位
vw
100vw表示可视区的宽度
vh
100vh表示可视区的高度
vmin
min(100vh, 100vw):表示可视区宽度和高度的最小值
vmax
max(100vh, 100vw):表示可视区宽度和高度的最大值
百分比
严格意义上来说,百分比并不是单位,表示相对于父组件相同属性的值的大小。