CSS单位
绝对单位
绝对单位是固定的,不受环境因素(如父元素、视口大小)的影响。它们在不同的浏览器和设备上总是相同的。
单位 | 释义 | 描述 |
---|---|---|
px | 像素 | 最常用的绝对单位之一1px 等于一个设备像素,适用于精确控制尺寸 |
pt | 点 | 通常用于印刷领域1pt 等于 1/72 英寸(约 0.353 mm) |
pc | 百分 | 1pc = 12pt |
in | 英寸 | 1in = 2.54cm |
cm | 厘米 | 1cm = 10mm |
mm | 毫米 | 1mm = 0.1cm |
相对单位
相对单位的值是相对的,它们依赖于某些参考值,如父元素的大小、视口的大小、根元素的字体大小等。
这些单位通常用于响应式设计,因为它们可以根据环境条件自动调整。
单位 | 释义 | 描述 |
---|---|---|
em | 当对于当前父元素的字体大小 如果当前父元素的字体大小是 16px ,那么 1em = 16px | |
rem | root em | 相对于根元素(通常是 html )的字体大小在 root 元素的字体大小为 16px 的情况下,1 rem = 16px |
% | 百分比 | 相对于父元素的大小 常用于宽度、高度、边距和填充等属性 |
vw | 视口宽度 | 相对于视口宽度的 1% 100vw 等于视口的宽度 |
vh | 视口高度 | 相对于视口高度的 1% 100vh 等于视口的高度 |
vmin | 视口最小值 | 相对于视口宽度和高度中较小的那个值的 1% |
vmax | 视口最大值 | 相对于视口宽度和高度中较大的那个值的 1% |
ex | 相对于当前元素的字体*高度 通常用于字体的高度相关属性 | |
ch | 相对于当前字体的 0 字符的宽度通常用于设置字符基准的宽度 |