CSS 相对单位em和rem

em相对于父级元素的排版大小，(typography,指定了font-size就以父元素的font-size为依据，否则已父元素继承的font-size为依据，如果所有的元素都未指定font-size, 或者font-size都为相对单位，那么以字体的排版大小为依据,一般字体大概是16px), rem相对于根元素的排版大小。

<div style="font-size:2em">
<span style="background-color:yellow">XYZ</span>
<svg viewBox="0 0 128 128"  style="width:1em; height:1em" 
	xmlns="http://www.w3.org/2000/svg">
	<path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 
	43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 
	23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 
	43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 
	0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/>
</svg>
</div>

效果如下：字符和svg等高

Posted in: java基础