标记说明：
数字上标为有疑惑的地方
尽量做到在专有名字后面给出英文翻译，因为官方的文档基本上是英文的，经过各个读者的翻译后可能有所区别而产生歧义。
概述：
em：相对于当前对象内文本的字体大小。相对于父节点的字体大小
立即学习“前端免费学习笔记（深入）”；
rem：相对于根元素的字体大小。应用场景：以文字内容决定布局的。
vh和vv：1vh等于1/100的视口高度①，1vw等于1/100的视口宽度。
vmin和vmax：关于视口高度和宽度的最小值或最大值，vmin等于1/100的视口宽高中的最小值。应用场景：让一个元素始终在屏幕中可见。
ch：数字0的宽度
ex：当前字体的小写x字母的的高度或者1/2的1em②。应用场景：上实上标和下标
提取到的信息：
1、font-size：若没有声明则会继承父节点的属性
引申：
①window, document,body宽高：
body高度是body元素的高度（包括边框滚动条等），四周默认带有8px的margin
若没给html设置颜色，给body设置了颜色，则body的颜色填充整个背景
视口viewport指的是浏览器可视范围，除去边框，滚动条，工具栏的文档显示区域
②0.5em怎么可能和1ex相等？
实际测试后发现设置0.5em与1ex的表现略有区别。毕竟小写x字母不一等是字体大小font-size的一半。当然不能排除有种字体刚好满足这个条件
relative：会在应有的位置上进行偏移。dom的原位置保留
以上就是CSS3中介绍最新的几种长度单位的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
444
