line-height 引起的疑问

平时工作在修改组件库的样式时，总会看到一些组件在设置 line-height 这个属性时，会设置成 line-height:1 这样用数字来表示，因而秉着不知道原因就是不会的道理，找时间学习了一下，现在进行一下总结。

mdn 上关于 line-height 的解释 ：line-height 设置为的无单位的数字，是根据这个数字*字体大小 并推荐使用这种方式设置行高，不会在继承时产生不确定的结果。

设置一个 font-size:20px，line-height:2 的 div 元素。可以看到 line-height 的高度为 font-size 的 2 倍

如果 font-size 设置为 0，line-height 也是按照 font-size 进行计算

2024 年了，css 单位都有哪些

由 line-height 而看了 mdn 后，发现除了常用的 px、rem、em、vw、vh 以外，还有好多不曾了解过的 css 单位，也一起记录一下。

相对长度单位：以其他距离为单位的一种尺寸，这个单位可以是根据 font-size，line-height，viewport 的大小

字体相对长度：根据一个特定字符的大小或当前字符所在，

单位解釋
lh等于元素的 line-height 的值
rlh根据根元素的 line-height 或 font-size 的大小

视口比例的长度：

单位解釋
svw/svh小视口的 1%
lvw/lvh大视口的 1%
dvw/dvh动态视口的 1%
vmin视口宽度 vw 和高度 vh 两者之间的最小值
vmax视口宽度 vw 和高度 vh 两者之间的最大值
cqw表示容器查询宽度（Container Query Width）占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px，则此时 1cqw 对应的计算值就是 10px
cqh表示容器查询高度（Container Query Height）占比。1cqh 等于容器高度的 1%

svw、lvw、dvw 使用

像 svh、dvh 与 vh 的区别，在于移动端像 safari 和 chrome 浏览器中的导航栏，在使用 vh 设置高度的时候，同样设置一个居中元素，会看起来不是在中间位置，但用
svh、dvh 设置高度，就会显示在页面正中间

适用场景如：在移动端解决默认滚动条的时候，可以使用 dvh 来解决