单位

@Unit

更多信息，请访问一文读懂 CSS 单位

绝对单位

像素[点]

绝对单位

使用最频繁

字符

绝对单位

可以用来实现打字效果

相对单位

百分比

宽度 width、填充 padding、空白 margin 使用百分比时，相对于父级的宽度

用于自适应布局

用于设置根字体

html {
    font-size: 62.5%;
}

相对于上一级/父级元素字体大小

如果父级没有显示的设置 font-size，则继续往上查找，直到根元素 HTML

参考过于凌乱，不建议使用。主要应用场合是设置段落的2个字符首行缩进和段落间距

p {
  text-indent: 2em;
  margin-bottom: 1em;
}

rem

相对于根元素 html 字体大小

参考唯一，比较容易调整

采用 rem 单位时，为了换算方便，通常设置 HTML 的 font-size: 62.5%，即16*62.5%=10; 16px = 1.6rem;1rem = 10px;

用于设置根字体

vw：视口 viewport 宽度

vh：视口 viewport 高度

每个视口 viewport 水平垂直各分为100份

fraction | 份数；子项相对于容器的份数；多用于网格布局 grid

flex

子项在容器中的比例；多用于弹性盒子布局 flex

前端UI框架中多采用12份、24份进行布局，如 Bootstrap、element UI；更多信息，请访问 the lengths of css、The Power of em Units in CSS

[] em 父级参考

<div>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

p {
    font-size: 2em;
}

[解读]只设置<p>元素字体大小，因为父级<div>没有设置，最终参考的是<html>的大小16px。所以最后<p>元素字体大小为 2*16px = 32px

[解读]如果<div>显式的设置了字体大小为20px，则<p>字体大小为2*20px = 40px

div {
    font-size: 20px;
}

p {
    font-size: 2em;
}