CSS 常见的几个单位笔记

CSS 常见的几个单位笔记

1、px

• 绝对单位，页面按精确像素展示。

  width: 100px;
  

2、em

• 相对长度单位，相对于当前对象内文本的字体尺寸。

  font-size: 16px;
  width: 1em;/*1em=16px*/
  

3、rem

• 相对单位，与em相似，只是只相对根节点html的字体大小来计算，是CSS3新加属性，chrome/firefox/IE9+都支持。

  html{
      font-size: 16px;
  }
  div{
      font-size: 14px;
      width: 1rem;/*1rem=16px,rem只与根节点html的字体大小有关*/
  }
  

4、vw

• 视窗(浏览器窗口的尺寸)宽度，1vw等于视窗宽度的1%。

  width: 1vw;
  

5、vh

• 视窗(浏览器窗口的尺寸)高度，1vh等于视窗高度的1%。

  width: 1vh;
  

6、%

• 百分比，相对于父元素

  /*父元素*/
  #f{
      width: 1000px;
  }
  /*子元素*/
  #z{
      width: 1%;/*1%=100px*/
  }
  

7、兼容性

	chrome	ie	firefox	safari	opera
px、em、%	1.0	3.0	1.0	1.0	3.5
rem	4.0	9.0	3.6	4.1	11.6
vh, vw	20.0	9.0	19.0	6.0	20.0