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>