一、em 是一个相对长度单位，参照的是当前元素的字号的px长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>长度单位</title> <style> html { font-size: 16px; } body { padding: 0; margin: 0; background-color: #F7F7F7; font-size: 62.5%; /*10 / 16 = 0.625*/ } /*em 是一个相对长度单位，参照的是当前元素的字号的px长度*/ .box { font-size: 16px; } span { display: block; width: 20em; height: 20em; background: pink; font-size: 12px; } /*span的宽和高是span标签字体大小的20倍，(12*20)px*/ </style> </head> <body> <div class="box"> <span>有一些文字</span> </div> </body> </html>
二、rem也是一个相对的长度单位，参照的是html根元素的字号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>长度单位</title> <style> body { padding: 0; margin: 0; background-color: #F7F7F7; } /*rem也是一个相对的长度单位，参照的是html根元素的字号*/ /*rem使用比较灵活*/ .box { width: 10rem; height: 10rem; background-color: pink; font-size: 20px; } </style> </head> <body> <div class="box"> 有一些文字 </div> </body> </html>