CSS 中 %、em、rem 分别代表什么?
ITPOW2017/2/14 19:24:20
% 与 em 相同,都是上层元素“计算出来的字体大小”乘以百分比,以上层元素为基数。
rem 也是倍数,但是它不是按上层元素为基数,而是作用于本元素的字体大小乘以倍率。
<head> <style type="text/css"> * { font-size:100px; } .d1 { font-size:30px; } /*30px*/ .d2 { font-size:200%; } /*60px*/ .d3 { font-size:200%; } /*120px,上层元素“计算出来的字体大小”乘以百分比*/ /*.d3 { font-size:2em; } /*em 同 %*/ .d4 { font-size:2rem; } /*200px,作用于本元素的字体大小乘以倍率*/ </style> </head> <body> <div class="d1"> d1 <div class="d2"> d2 <div class="d3"> d3 <div class="d4"> d4 </div> </div> </div> </div> <div style="font-size:13px;">text</div> </body>
效果:
<<返回首页<<