(1) CSS中常用的长度单位
我们先来温习下常用的css单位
% -- 百分比
in -- 寸
cm -- 厘米
mm -- 毫米
pt -- point,大约1/72寸
pc -- pica,大约6pt, 1/6寸
px -- 屏幕的一个像素点
em -- 继承的font-size,比如父元素 100px,子元素 1em = 100px
ex -- font-size的 x-height 值,为小写字母x的高度,相当于 font-size 的一半
重点:em 和 %
.box{
line-height: 1.3em;
}
元素的行高是当前元素继承的font-size的1.3倍
.box{
line-height: 130%;
}
元素的行高是当前元素继承的font-size的130%倍,等同于1.3em
(二)、CSS3新引入的长度单位
ch -- 字符0(零)的宽度
rem -- 根元素(html元素)的font-size
什么意思呢?
比如,根元素html的字体大小是100px,那么,根元素下面的元素设置的rem,都是 1rem = 100px。
rem的初始值是16px,也就是说在没有设置根节点的 font-size时候,1rem = 16px
切记,是相对于根元素html,如果设置body,则不会起作用
谨记:vw和vh只相对于浏览器可视区域,即 window.innerHeight,window.innerWidth
vw -- 浏览器可视区域, 1vw 等于 浏览器可视区域宽度的 1%
vh -- 浏览器可视区域, 1vh 等于 浏览器可视区域高度的 1%
vmin -- vw和vh中较小的那个
vmax -- vw和vh中较大的那个
比如浏览器宽/高 设置为 1000px/600px
那么,
2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px