css的各种单位

我常用的单位无非px,rem,deg等等,但今天看到了vw,vh,vm这样的单位,遂决定总结一下。

关于单位的相关来自张鑫旭大神,在我的理解上做了些补充~

单位 含义
em 相对于父元素的字体大小,若父元素font-size为16px,那么1em就为16px
ex 相对于小写字母"x"的高度
gd 一般用在东亚字体排版上,这个与英文并无关系
rem 相对于根元素字体大小,若根元素font-size为16px,那么1em就为16px
vw 相对于视窗的宽度:视窗宽度是100vw
vh 相对于视窗的高度:视窗高度是100vh
vm 相对于视窗的宽度或高度,取决于哪个更小
ch 1ch的大小和字母o的宽度相等
px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter, 表毫米
pt 磅,1/72英寸,绝对长度单位
pc 12点活字,或1/12点,绝对长度单位
% 相对于父元素。正常情况下是通过属性定义自身或其他元素
1in = 2.54cm = 25.4 mm = 72pt = 6pc
单位 含义
deg degrees, 角度,一个圆360度
grad grads, 梯度,一个圆400梯度
rad radians, 弧度,一个圆2π弧度
turn turns, 圈数,一个圆共一圈
ms milliseconds, 毫秒数
s seconds, 秒数
Hz Hertz, 赫兹
kHz kilohertz, 千赫

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad 

 vw,vh,vm:

  • 为css3新单位。
  • 所提到的视窗:“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
  • 可用来做响应式布局。如设置宽度为20vw,高度为40vh,表示当前元素在任何屏幕下都是div占当前屏幕宽度的20%,当前高度的40%。但兼容性不好,使用并不广泛。

ex:

ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常,这是这个字体的中间的标志。


ch:

给定一个等宽字体的字体,一个N个字符单位宽的盒子,比如width:40ch;,可以一直容纳一个有40个字符的应用那个特定字体的字符串。


猜你喜欢

转载自blog.csdn.net/baibaider/article/details/79859291