关于em,rem,%的使用笔记

百分比

容器的width，height，margin-left等设置百分比均是相对于父容器，比如父容器宽度100px，子容器margin-left为40%时为40px；

注意：仅相对最近一级父容器，如果最外层有设宽度，中间层没设宽度（0），那么最里层设置百分比也是无效的，不会往上寻

em

任何浏览器字体默认大小均为16px，所以一般在body中设置font-size:62.5%；（即16*62.5%=10px），这样子容器就1em=10px，1.5em=15px。
但是在Chrome浏览器下，当font-size小于12px时，浏览器会按12px计算，这样就导致1em等于12px。因此，可以把 html的font-size设置为625%，即子容器1em=100px。

注意：
1、最外层设置font-size:20px,中间层设置font-size:2em，最里层设置width:3em，则最里层宽度为20*2*3px=120px，所以避免叠层，一般只在最外层（body或html）设置font-size。
2、子容器的width，height，margin-top等设置em，以外层容器已有的font-size为基准；子容器的width，height，margin-top等设置百分比，以外层容器已有的width和height为基准
3.利用em实现垂直居中对齐：html（body）设font-size:100px;外层容器relative，内层文字absolute，top:50%,font-size:xem(x为不小于0.12任意值)，margin-top:-0.5em;即上升半行字体高度

rem

所有层级容器均相对html而言，很好用。