css中的单位

最近阅读《深入解析css》，对css中的知识进行了总结，现将一些知识进行整理，便于应用。

相对单位 em rem

   css中绝对单位为px。相对单位有em  rem(root em)  1em相当于一个当前元素的字号。如果当前字体指定为16px,则em就是16px，在设置padding、height 等时，常用这些相对单位。
   html文档中，根节点为所有元素组节点，他有个伪类选择器（：root）等于类型选择器html。rem为root em 简写 是指相对于根节点的字号大小。
   作者在使用中，用rem设置字体大小，用px设置表框(bord)，用em设置边距、圆角等.

利用媒体查询使得不同屏幕字体不同

	为使得不同屏幕字体不同，作者用到媒体查询器

:root{
font-size:0.75em
}
@media(min-width:800px){
:root{
font-size:0.875em
}
}

viewport的相对单位

em rem 针对的是font-size大小，vh vw vmin vmax 则针对viewport (视区)尺寸 1vh= 1/100 viewport height 1vw=1/100 viewport width
vmin 则指的是宽和高中最小的一个，当然vmax 是宽高中最大的一个。

cale()在字体大小中的应用

利用cale函数结合相对单位对字体大小进行设置可使得字体在不同窗口中合理显示。

:root{
font-size:cale(0.5em + 1vw)
}

cale在进行+ - * /等运算时，符号前后一定为空格间隔

无单位的数值和行高

line-height z-index font-weight (700 等于blod 400等于nomal) 如果给无单位给与单位 继承的是声明值，在每个继承子元素上会查询计算它的计算值，谨慎使用。

CSS变量

变量用–（两个连字符）声明，应用时用var()函数，如var(–main-font)。var（）有两个参数，第二个参数指的是缺省值。

:root{
--main-font:Helvetica ,sans-serif;
}