CSS中的单位有哪些

2020/7/7

# Heading

# %百分比

百分比不能算是一种单位,可以理解为包含数值和单位的数据,不管离子元素最近的父元素的该属性是什么单位,都是将 数值*百分比+单位 计算出child的属性值。
padding和margin的值为百分比是相对于父元素的width计算的,不管是padding-left,还是padding-top

# px

像素 (计算机屏幕上的一个点)

# em

单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。
相对于当前对象内文本的字体尺寸。例如: 
1em 等于当前的字体尺寸; 
2em 等于当前字体尺寸的两倍。 
如果某元素以 12pt 显示,那么 2em 是24pt。 
在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

# rem

使用rem同em一样皆为相对字体大小单位,不同的是rem相对的是HTML根元素。 
rem中的“r”代表“root”,这意味着设置当前元素的字体大小的基准为根元素,大多数情况下,我们会设置在html元素上。

# vh 和 vw

在进行响应式布局时,我们常常会使用百分比来布局,然而CSS的百分比不总是解决每个问题的最佳方案,CSS的宽度相对于离它最近的父元素的宽度。 如果你想使用视口的宽度、高度而不是父元素的宽高,可以使用vh和vw单位。
vh = viewportHeight * 1/100; 
vw = viewportWidth * 1/100;
使用vh、vw就可以保证元素的宽高适应不同设备。

# vmin 和 vmax

vw和vh对应于viewport的width和height,而vmin和vmax分别对应于width、height中的最小值和最大值,例如如果浏览器的宽/高被设置为1000px/600px,那么
vmin = 600 * 1/100;
vmax = 1000 * 1/100;

# ex 和 ch

ex、ch单位与em、rem相似之处在于都依赖于font-size,但是ex、ch还依赖于font-family,基于font-specific来计算

# 其他

in英寸
cm厘米
mm毫米
pt磅 (1 pt 等于 1/72 英寸)
pc12 点活字 (1 pc 等于 12 点)