绝对单位
px:像素
相对单位
%:百分比
- 相对于父元素宽度的，（如果自身已经是最外层元素，则相对于视口）
width、padding、margin、left、right、text-align
- 相对于父元素高度的：（如果自身已经是最外层元素，则相对于视口）
height、top、bottom
关于height百分比定位：若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式。除非该元素已经是最外层元素，此时是相对于视口。
- 相对于父元素的:
font-size
- 相对于自身元素的宽高：
translate
em:
基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
<style>
body {
font-size: 14px;
}
div {
font-size: 1.2em;
}
</style>
<body>
<div>
Test (14 * 1.2 = 16.8px)
<div>
Test (16.8 * 1.2 = 20.16px)
<div>
Test (20.16 * 1.2 = 24.192px)
</div>
</div>
</div>
</body>remrem中的"r"代表"root"；这等同于font-size基于根元素进行设置；在大多数情况下根元素为html元素。
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2rem;
/* 2rem === 28px */
}
</style>vw、vh
1vw等于视窗宽度的1%。1vh等于视窗高度的1%。
假设设备可视范围为高度 900px，宽度 750px，则，1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px。
<body>
<h1>article title</h1>
<div class="element"></div>
<div class="full-height"></div>
</body>
<style>
.element {
width: 50vw;
height: 80vh;
/* 如果屏幕高度为1000px，则该元素高度为800px，vw 同理 */
}
.full-height {
height: 100vh;
/* 轻易实现了与屏幕同等高度的元素 */
}
h1 {
width: 100vw;
/* 设置一个和屏幕同宽的标题，标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。 */
}
</style>vmin / vmax 可视范围的宽度或高度中较小/较大的那个尺寸
假设浏览器的宽度设置为 1200px，高度设置为 800px， 则1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。
如果宽度设置为 600px，高度设置为 1080px, 则1vmin = 6px, 1vmax = 10.8px。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。