CSS |单位

CSS 有几种不同的单位来表示长度和度量。需要 CSS 单位来指定样式表中的度量，例如padding:”5px” 。 CSS中主要有两种类型的单位。

• 绝对长度
• 相对长度

绝对长度：它不适合在屏幕上使用，因为屏幕尺寸因用于该页面的设备而异，建议用于打印布局和输出介质已知的位置。
绝对长度单位：

• cm：厘米
  句法：

  font-size: 0.5cm;
     line-height: 0.1cm;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• mm：毫米
  句法：

  font-size: 5mm;
     line-height: 1mm;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• 以英寸来算
  注：英寸(1in = 96px = 2.54cm)
  句法：

  font-size: 0.2in;
      line-height: 0.1in;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• px：像素
  注意：像素(1px = 1in 的 1/96)
  句法：

  font-size: 20px;
     line-height: 10px;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• 点：点
  注：点数(1pt = 1/72 of 1in)
  句法：

  font-size: 16pt;
      line-height: 8pt;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• 电脑：皮卡
  注意： picas (1pc = 12 pt)
  句法：

  font-size: 1pc;
        line-height: 0.5pc;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

相对长度：适合在屏幕上使用，如果屏幕尺寸因设备而异，那么这些相对长度单位是完美的，因为它会随着不同的渲染介质而变化。

相对长度单位：

• em：相对于该元素的字体大小。
  注意：这里的 2em 表示当前字体大小的 2 倍。
  句法：

  font-size: 10px;
      line-height: 2em;
  

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks Line height: 2x10px = 20px
          
  GeeksforGeeks Line height: 2x10px = 20px
          
  GeeksforGeeks Line height: 2x10px = 20px
      
                      
  

  输出：
  

• 例如：相对于当前字体的 X(axis)-height。
  句法：

  font-size: 1ex;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks:A computer science
          portal for geeks
      
                      
  

  输出：
  

• ch：相对于0 的宽度。
  句法：

  font-size: 2ch;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• rem：相对于浏览器基本字体大小。
  句法：

  font-size: 3rem;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• vw：相对于视口宽度的 1%。
  句法：

  font-size: 10vw;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• vh：相对于视口高度的 1%。
  句法：

  font-size: 10vh;

  例子：

  
      
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：
  

• vmin：相对于视口较小尺寸的 1%。
  句法：

  font-size: 10vmin;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
          
  1vmin = 1vw or 1vh whichever is smaller.
      
                      
  

  输出：
  

• vmax：相对于视口较大尺寸的 1%。
  句法：

  font-size: 20vmax;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
          
  1vmax = 1vw or 1vh whichever larger.
      
                      
  

  输出：
  

• %: % 单位设置相对于当前字体大小的字体大小。
  句法：

  font-size: 250%;

  例子：

  
      
          
          
      
      
          
  GeeksforGeeks
          
  A computer science portal for geeks
      
                      
  

  输出：