CSS 单位 - %、em、rem、px、vh、vw

在本文中，我们将了解如何以不同的方式设置 CSS 单位。

• % – % 单位用于设置相对于当前字体大小的字体大小。
• em -用于设置相对大小。它与元素的字体大小有关。
  注意：这里的 2em 表示当前字体大小的 2 倍。
• rem –相对于浏览器的基本字体大小。
• px -它以像素为单位定义字体大小。 （96 像素 = 1 英寸）
• vh -相对于视口高度的 1%。
• vw –相对于视口宽度的 1%。

示例1：像素单位是设置宽度的绝对单位，即始终相同。百分比单位基于相对单位，即基于其父大小。

HTML

  

    

  

    
Output-1 
    
50%
    
100px
    

    
Output-2 
    

        
50%
        
100px
    

  

输出 ：

示例 2：另一种类型的相对宽度称为视图宽度 (vw) 和视图高度 (vh)。 1vw 等于整个屏幕尺寸的百分之一，因此 100 vw 将占据整个宽度，而 50vw 显然会占据一半宽度，但关于 vw 与百分比的重要一点是，视口单位基于整个屏幕尺寸，而矩形是相对的给他们的父母。

HTML

  

    
    

  

    
Output-1 
    
50%
    
50vw
    
25vh
    

    
Output-2 
    

        
50%
        
50vw
        
25vh
    

  

输出：

示例 3： REM 单位和 EM 单位都是相对的，但不是相对于它们周围的事物，例如它们的父母的宽度或父母的高度，它们实际上是相对于字体大小的。

HTML

  

    
    

  

    
Output-1
    
1rem
    
1em
    
2rem
    
2em
    

    
Output-2
    

        
1rem
        
1em
        
2rem
        
2em
    

  

输出：