px、em、rem

1、px

1个px相当于一个像素

2、em

em是相对的长度单位,既然是相对的长度单位,那么一定有一个参照对象。

  1. em 相对参照对象为父元素的font-size

  2. em具有继承的特点,如果em的父元素没有设置font-size,那么它会去找他父元素的父元素,一级级的往上找,知道找到位置

  3. 当没有设置font-size时,浏览器会有一个默认的em设置,一般设置为:1em = 16px

3、rem

rem也是相对的长度单位,参照对象为根元素html,参照物固定不变,所以比较好计算。

  • 当没有设置font-size时,浏览器会有一个默认的rem设置,一般设置为:1rem = 16px

  • 若根元素html字体大小设置为:font-size:62.5% ,则 1rem = 10px (10/16*100%)

  • 若根元素html字体大小设置为:font-size:100% ,则1rem = 16px

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容