<!DOCTYPE html> <html lang="en"> <head> <!-- 默认font-size大小为16pixel 最小font-size为12pixel --> <meta charset="UTF-8"> <title>em单位</title> <style> .box01{ /*font-size: 10px;*/ /* 一般情况下字体大小最小为12pixel,当设置小于12pixel的时候,也默认为12pixel. 作为em.就是以字体大小做为单位. 12pixel(像素) = font-size = 1element(元素) 当设置font-size的时候,element自然也随之而变动. 所以可以根据字的大小变化而变化. */ width: 10em; height: 10em; padding: 0; border: 1em solid violet; background: khaki; } .box02{ font-size: 20px; width: 10em; height: 10em; border: 1em solid violet; background: plum; } </style> </head> <body> <div class="box01"></div> <div class="box02"></div> </body> </html>