Units of CSS

地址：https://www.w3schools.com/css/css_units.asp

https://www.cnblogs.com/xiaohuochai/p/5485683.html

 

em

<style>
.box{font-size: 20px;}
.in{
    /* 相对于父元素，所以2*2px=40px */
    font-size: 2em;
    /* 相对于本身元素，所以5*40px=200px */
    height: 5em;
    /* 10*40px=400px */
    width: 10em;
    background-color: lightblue;
}
</style>

<div class="box">
    <div class="in">测试文字</div>    
</div>

rem

<style>
/* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */
html{font-size: 2rem;}
/* 2*32=64px */
.box{font-size: 2rem;}
.in{
    /* 1*32=32px */
    font-size: 1rem;
    /* 1*32=32px */
    border-left: 1rem solid black;
    /* 4*32=128px */
    height: 4rem;
    /* 6*32=192px */
    width: 6rem;
    background-color: lightblue;
}
</style>

<div class="box">
    <div class="in" id="test">测试文字</div>    
</div>