Css - 长度单位px、pt、em、rem

一. 相对长度单位

1. em是相对于当前元素的字体大小。（设置font-size时特殊）

    
        
        
        
    
    
        

            
hello world - 设置了自身元素的字体大小
            
hello world - 设置了自身元素的字体大小
            
hello world - 没有设置自身元素字体大小
        
      
    

• 我们设置父元素div字体大小为30px
• p1设置了自身元素的字体大小为20px，缩进设置为1em。
• p2设置了自身元素的字体大小为20px，缩进设置为20px。
• 最终效果，p1和p2的字体大小都为20px，缩进都为20px，和明显text-indent内的em是相对于自身元素的字体大小计算的。
• p3没有设置自身元素的字体大小，最终效果是：字体大小为30px，缩进也为30px。
• 既然如此，那em不是相对于父元素字体大小吗？p3其实是继承了继承了父元素的字体大小，也就是说p3的font-size也是30px，然后text-indent的em其实也是根据p3的自身元素字体大小计算的。

为什么有时候说em是根据父元素的字体大小计算呢？

• 因为在设置font-size的时候可以这么理解。

    
        
        
        
    
    
        

            
hello world
        
    

• 在给子元素设置font-size时发现em的确是相对于父元素的字体大小。其实也很好理解，因为设置子元素的font-size时，元素的字体大小还没有，那怎么参考自己呢？答案就是参考父元素。

2. rem是全部的长度都相对于根元素

• em需要考虑父元素的关系，html的结构有时候是比较复杂的，每次使用em都要考虑的话不利于维护。
• rem直接统一参考系为根元素，每次使用rem时先设置的字体大小。

    
        
        
        
    
    
        
hello world
    

二. 绝对长度单位

1. px 像素（1px = 1/96th of 1英寸（ 2.54cm））

2. pt 点（1pt = 1/72th of 1英寸（ 2.54cm））