今天突然发现对rem和em的理解有很多的错误
1.对em来说，它的大小是相对于父层font-size来改变，但是如果其自身有font-size属性的话，em会优先考虑自身的font-size;
2 rem是相对于根节点html的font-size来改变的
小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem和em</title> <style type="text/css"> html{ font-size: 20px; } .div1{ 200px; height: 200px; border: 1px solid red; font-size: 20px; } .div2{ font-size: 15px; height: 3rem; 3em; border: 1px solid #000; margin: 0 auto; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> </html>
图
div2的font-size为15px，其宽度为3rm，即为15*3+2=47
当去除自身的font-size，则继承父类的font-siz，即为20*3+3=62；
rem是严格按照html的font-size的大小
注意：font-size一定要大于12px，若你font-size设置为10px，则宽度为12*3+2=38；
浏览器默认的fon-size为12px