# 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 点)