CSS中单位的关系

CSS中单位的关系

// An highlighted block
  css中有     vh   vw  单位       

  height:calc(100vh * 0.2)    //  图片占屏幕高度的百分之20

  calc(100vw * 0.2)    //  图片占屏幕宽度度的百分之20

  

  px：绝对单位，页面按精确像素展示

  em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

  rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

  vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
  vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。