CSS |单位

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

• 绝对长度
• 相对长度

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

• cm：厘米
  句法：

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    

• 输出：

• mm：毫米
  句法：

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    
                   

• 输出：

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

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    
                   

• 输出：

• px：像素
  注意：像素（1px = 1in 的 1/96）
  句法：

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    
                   

• 输出：

• 点：点
  注：点数（1pt = 1/72 of 1in）
  句法：

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    
                   

• 输出：

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

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

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
        
A computer science portal for geeks
    
                   

• 输出：

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

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

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

• 例子：

html

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

• 输出：

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

font-size: 1ex;

• 例子：

html

    
        
        
    
    
         
GeeksforGeeks:A computer science
        portal for geeks
 
    
                   

• 输出：

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

font-size: 2ch;

• 例子：

html

    
        
        
    
    
         
GeeksforGeeks
 
        
A computer science portal for geeks
    
                   

• 输出：

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

font-size: 3rem;

• 例子：

html

    
        
        
    
    
         
GeeksforGeeks
 
        
A computer science portal for geeks
    
                   

• 输出：

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

font-size: 10vw;

• 例子：

html

    
        
        
    
    
        
GeeksforGeeks
         
A computer science portal for geeks
 
    
                   

• 输出：

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

font-size: 10vh;

• 例子：

html

    
        
    
    
        
GeeksforGeeks
         
A computer science portal for geeks
 
    
                   

• 输出：

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

font-size: 10vmin;

• 例子：

html

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

• 输出：

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

font-size: 20vmax;

• 例子：

html

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

• 输出：

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

font-size: 250%;

• 例子：

html

    
        
        
    
    
         
GeeksforGeeks
 
        
A computer science portal for geeks
    
                   

• 输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器