关于html中单位的总结

277 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

单位

什么是值和单位

什么是 CSS 的值

CSS 中的值是一种定义允许子值集合的方法。

什么是 CSS 的单位

在使用不同类型描述长度值时,需要附加单位

1. 绝对长度单位

绝对长度单位所描述的长度一般与任何其他因素是无关的。可以简单地理解为无论在什么情况下,这种的长度是固定、不变化的。

如下表所示展示了常见的绝对长度单位

单位名称等价换算
cm厘米1cm = 96px/2.54
mm毫米1mm = 1/10th of 1cm
Q四分之一毫米1Q = 1/40th of 1cm
in英寸1in = 2.54cm = 96px
pc十二点活字1pc = 1/16th of 1in
pt1pt = 1/72th of 1in
px像素1px = 1/96th of 1in

2. 相对长度单位

相对长度单位所描述的长度一般会具有一个明确的参考物,例如父级元素、根元素或视口大小等。使用相对长度单位相对绝对长度单位更适用于现在越发复杂的终端设备的屏幕输出。

如下表所示展示了常见的相对长度单位

单位相对于
em父元素的字体大小
ex字符“x”的高度
ch数字“0”的宽度
rem根元素的字体大小
lh元素的line-height
vw视窗宽度的1%
vh视窗高度的1%
vmin视窗较小尺寸的1%
vmax视图大尺寸的1%

像素值(px)

像素是指在由一个数字序列表示的图像中的一个最小单位。简称为分辨率

百分比(%)

百分比(%) 总是将某个值作为参考,设置为这个参考值的百分比。作为参考值。

em 与 rem

em 与 rem 都是相对单位,目前更多应用于移动端设备,例如手机、平板电脑的显示。

  • em:是相对于当前 HTML 元素的父级元素来进行设置。
  • rem:是相对于当前 HTML 根元素(``)来进行设置。

上述 2 种单位都具有如下 3 种情况:

  • 小于 1 时:表示相对于父级元素或根元素缩小。例如 0.5em 表示是父级元素的 0.5 倍,0.5rem 表示是根元素的 0.5 倍。
  • 等于 1 时:表示与父级元素或根元素的大小保持一致。
  • 大于 1 时:表示相对于父级元素或根元素放大。例如 1.5em 表示是父级元素的 1.5 倍,1.5rem 表示是根元素的 1.5 倍。

总结

  • 单位分为绝对单位和相对单位。绝对单位多使用的是像素,相对单位一般具有某个 HTML 元素作为参考。
  • 像素是一个绝对单位。但要注意像素与分辨率之间的关系。
  • 百分比在 CSS 中一般指当前 HTML 元素是其父级元素的百分比。
  • em 和 rem 都是相对单位,em 是相对于当前 HTML 元素的父级元素,而 rem 是相对于当前 HTML <html> 根元素。