px
像素 pixel 的缩写，即电子屏幕上的1个点，以分辨率为 1024 * 768 的屏幕为例，即水平方向上有 1024 个点，垂直方向上有 768 个点，则 width:1024px 即表示元素的宽度撑满整个屏幕。
随屏幕分辨率不同，1px 的大小也不同，所以严格来说，px 也是相对单位，但不考虑屏幕分辨率时，也可以把 px 当作绝对单位来看待。
% 百分比
通常百分比都是相对于父元素的 content box 计算，所以父元素必须有显式的值，若父元素 height 为 auto ，则百分比值将完全失效！
以下样式的百分比计算规则比较特殊，需特别留意：
-
width、height、font-size的百分比相对于父元素“相同属性”的值计算 -
line-height的百分比相对于父元素的font-size计算 -
vertical-align的百分比相对当前元素的line-height计算 -
position:absolute绝对定位元素相对于第一个position不为static的祖先元素的padding box计算 -
position:fixed悬浮定位元素的宽度相对于 html 计算（尺寸等同于浏览器可视窗口的大小）
【实战】撑满整个屏幕
<div class="fullScreen" style="background-color: greenyellow"></div>
html,
body {
height: 100%;
/* 清除浏览器的默认样式 */
margin: 0px;
padding: 0px;
}
.fullScreen {
height: 100%;
}
解析：
- 范例中 div 的高度 100% 会相对于父元素（body）的高度进行计算，所以 body 必须设置
height: 100%，而 body 的父元素是 html 标签，所以 html 也必须设置height: 100% - 宽度无需设置，因为 html , body , div 的都是
display:block块级元素，宽度都是自动撑满整个屏幕。 - 浏览器默认会给 html , body 添加 margin 和 padding （不同浏览器的默认样式不一样），此处需手动进行清除。
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056
em
相对于“当前元素”的字体大小来计算最终长度，以“当前元素” 的字体大小为 16px 为例，1em = 16px，2em 即 2*16 = 32px
最佳实践：用于维护某模块内元素间固定的比例关系，详见
https://blog.csdn.net/weixin_41192489/article/details/126118830
【实战】首行缩进两空格
<template>
<div style="background-color: greenyellow">
<p>很久很久以前</p>
</div>
</template>
<style lang="scss" scoped>
p {
text-indent: 2em;
}
</style>
【实战】限定中文内容宽度
article {
max-width: 42em;
}
rem
相对于根元素的字体大小计算长度，以根元素（ html 标签）的 font-size 为 16px 为例，2rem 即 2*16 = 32px。
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056
vw
相对于视口（浏览器的可视区域）宽度计算长度，1vw = 视口宽度的1%
- 100 vw 即水平方向撑满屏幕
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056
vh
相对于视口（浏览器的可视区域）高度计算长度，1vh = 视口高度的1%
- 100 vh 即垂直方向撑满屏幕
【实战】响应式布局
https://blog.csdn.net/weixin_41192489/article/details/136423056
vmin
相对于 vw 和 vh 中较小的计算长度，如手机竖屏时，1vmin = 1vw ; 手机横屏时，1vmin = 1vh ;
vmax
相对于 vw 和 vh 中较大的计算长度，如手机竖屏时，1vmax = 1vh ; 手机横屏时，1vmax = 1vw ;
ex
相对于字符 x 的高度计算长度
【实战】文字和图标垂直居中对齐
https://blog.csdn.net/weixin_41192489/article/details/115218875
ch
相对于字符 0 的宽度计算长度
【实战】手机号的输入框
将手机号输入框的宽度设为11ch，同时让字体等宽，一眼就能看出是否输入了11位的手机号码。
<template>
<label for="phone">手机号：</label>
<input id="phone" class="phone_input" type="text" />
</template>
<style lang="scss" scoped>
.phone_input {
width: 11ch;
/*等宽字体*/
font-family: 'Courier New', Courier, monospace;
}
</style>
【实战】限定英文内容宽度
需配合等宽字体才精准。
article {
max-width: 68ch;
}
/* 等宽字体 */
.font-mono {
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
