之前以为em单位只是在font-size中起到继承作用,
后来慢慢觉得,继承,应该是在几乎所有样式中都可以是实现的,比如height,width,border...
今天才简单测试了下,果真是可以实现,不过,只是要基于font-size的一并出现而已!
也就是说,想height等样式也应用上em的继承相对大小,必须在父节点中应用font-size的值!
代码片段如下:(可把emDiv类中的font-size注释来对比看看效果...)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css测试</title> <style> .emDiv { font-size: 2em; height: 2em; } .heightEmDiv1, .heightEmDiv2 { width: 6em; border-width: 0.2em; border-style: solid; } .heightEmDiv1 { font-size: 2em; height: 4em; border-color: red; } .heightEmDiv2 { font-size: 2em; height: 4em; border-color: blue; } </style> </head> <body> <div class="emDiv"> <div class="heightEmDiv1"> 111 <div class="heightEmDiv2"> 222 </div> </div> </div> </body> </html>