CSS中凡是牵扯到数值的基本上都与单位相关联,通常我们用到单位也就那么几个,而实际上CSS中的可用单位的数量多得惊人,尤其CSS3的出现更壮大了CSS单位家族。而本文就是简单展示下这些值这些单位。
CSS长度值
单位 | 含义 |
---|---|
em | 相对于父元素的字体大小 |
ex | 相对于小写字母”x”的高度 |
gd | 一般用在东亚字体排版上,这个与英文并无关系 |
rem | 相对于根元素字体大小 |
vw | 相对于视窗的宽度:视窗宽度是100vw |
vh | 相对于视窗的高度:视窗高度是100vh |
vm | 相对于视窗的宽度或高度,取决于哪个更小 |
ch | 相对于0尺寸 |
px | 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸 |
in | inch, 表英寸 |
cm | centimeter, 表厘米 |
mm | millimeter, 表毫米 |
pt | 1/72英寸 |
pc | 12点活字,或1/12点 |
% | 相对于父元素。正常情况下是通过属性定义自身或其他元素 |
时间、频率、角度
单位 | 含义 |
---|---|
deg | degrees, 角度 |
grad | grads, 百分度 |
rad | radians, 弧度 |
turn | turns, 圈数 |
ms | milliseconds, 毫秒数 |
s | seconds, 秒数 |
Hz | Hertz, 赫兹 |
kHz | kilohertz, 千赫 |
上面很多的单位是伴随着CSS3的诞生而诞生的。
旋转效果牵扯到角度,动画效果牵扯到时间,声音牵扯到频率。
参考文章
https://www.zhangxinxu.com/wordpress/2011/03/css-css3-unit-units/