2302_76765965的博客

原创 rem和em的区别你知道么？

我定义了三个盒子，一个父亲盒子parent以及两个子盒子child1和child2，并且父盒子字体大小为20px，宽高为10em，child1的盒子宽高为2em，child2盒子的宽高为2rem。child2子盒子宽高是以rem为单位的，虽然是parent的子盒子，但因为rem是以根因素的字体大小进行计算的，并且根元素的字体大小我设置的是10px，所以child2的宽高为2乘10px为20px。总结：rem是相对于根元素的字体大小计算，而em是相对于父元素的字体大小计算。-- .child2盒子的宽高。