后端开发教程 - Java、Spring Boot 实战 - msg200.com
CSS 相对间距单位指南
相对于文档的空间:root
使用：rem
除非您更改它，否则默认rem值具有16px响应缩放级别的变化的优势。
为什么以及如何使用rem
rem无论嵌套多深都不会改变，因此对于元素之间/周围的一致间距，它是一个可靠的选择。
它也是字体大小的首选测量方法。
相对于视口的空间
用途：视口单元
视口是浏览器窗口或设备屏幕尺寸的边界。
可用的视口单位
vh：视口高度 - 基于视口的高度vw：视口宽度 - 基于视口的宽度vminvh：视口最小值 - 返回或的较小值vw，并进行响应式更新vmaxvh: 视口最大值 - 返回或的较大值vw，并进行响应式更新
视口单元非常适合：
- 将元素保持在可见区域范围内
- 确保
<body>、<main>或启动画面标题的最小高度与视口一样高（min-height: 100vh） - 创建比例合适、响应迅速的元素
- 结合
calc影响多个元素的可见性 - 创建全高、全宽的幻灯片（特别是与 结合使用
scroll-snap）
此示例是一个几乎全高的标题，用于calc确保留出一些空间来提示其他内容：
相对于元素的空间
使用：em
em将与元素或其最近祖先元素的font-size规则保持比例。一个em等于 font-size，因此默认情况下，它等于1remdefault 16px。
与 相比rem，em可能会从父级复合到子级，从而导致不良后果。请考虑以下列表示例，其中字体大小设置在 中，em并且复合嵌套列表：
何时以及如何使用em
- 排版元素之间
- 文本组件上的填充，例如按钮或输入字段
- 对于
letter-spacing，通常为微值，例如0.03，也可以定义为负值
在以下 codepen 中，您可以更改$font-size变量以查看它如何影响labelandbutton作为一个单元：
相对于内容的间距
使用：ch，em
虽然em根据内容调整间距可能很合适，但单位宽度却不太受重视ch。该单位宽度等于字体系列中零个字符的宽度。
何时以及如何使用ch
用于根据最佳行长（50-80 个字符，具体取决于所用资源）设置宽度。首先80ch根据所使用的字体进行优化，并注意大多数字体较窄，0因此宽度ch可能需要大于所需的行长。
这非常适合：
article内容- 设置
flex-basis值，特别是对于flexbox albatross技术 minmax设置网格列的“最大”部分- 提供
min-width按钮或导航项