1、em
它是我们常用的,经常用在字的大小上。
它是大小是相对于父级的大小。
1em=父级px
2、百分比
指的是相对于父级的,在定义标签的width时会用
3、rem
它是em的增强版,ie9+
它相对于根html来设置大小。不会像em,依赖于父级大小。
一般都是:
html{font-size:62.5%}
原因:页面默认的大小是16px;但这样我想要12px时就应该是0.625rem。
这样算起来也不好算,如果默认大小是10px这样算起来就好多了
1rem=10px 1.2rem=12px
所以62.5=10/16
4、vh vw(ie10+)
vw单位是相对于页面的宽,1vw=页面宽的1%
vh单位是相对于页面的高,1h=页面高的1%
此单位可用于width font-size等
5、vmin vmax (ie10+)
vmin 获取的是页面宽和高中比较小的值
1vmin=宽高中小的值的1%
vmax获取的是页面宽和高中比较大的值
1vmax=宽高中大的值的1%
它可用于width font-size等
6、ch ex(ie9+)
这两个单位是相对于当前字体的单位。
ch 是当前字体下0字符的宽度
ex 是当前字体下x字符的高度
当然字符的宽和高也是和当前标签的字体大小有关。
它约定于字体和字体大小。
7、line-height
它的百分比也会常用到,
line-height:26px 行高26px
line-height:120% 行高是当前字体的120%
line-height:2em; 行高为当前字体的2倍
带单位的行高是有继承关系的,不会因为字大小的改变而改变行高
如父字体14px 行高2em 则是28px
子字是12px 它的行高还是28px
不带单位的行高继承是随着子的字体大小来计算出行高的