改字号其它自动变大或变小，em这样用效果真神奇！

em的意义,案例来演示

案例效果

em的意义

案例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em的意义,案例来演示</title>
    <style>
      /* em: 当前浏览器的默认字号的引用
        font-size: 20px,1em = 20px 
        em: 始终与当前元素的字号绑定, 只要改变当前这个字号,就可以动态的改变依赖它的所有的属性 */
      .box {
        background-color: darkseagreen;
        box-sizing: content-box;
        font-size: 20px;
        /* border:10px */
        border: 0.5em solid cadetblue;
      }
      .box1 {
        /* 宽度：20*20=400 */
        width: 20em;
        /* 高度：20*5=100 */
        height: 5em;
      }
      .box2 {
        /* 宽度：20*10=200 */
        width: 10em;
        /* 高度：20*2=40 */
        height: 2em;
      }
    </style>
  </head>
  <body>
    <div class="box box1">box</div>
    <p><hr></p>
    <div class="box box2">box</div>
  </body>
</html>

案例总结

em: 当前浏览器的默认字号的引用
font-size: 20px,1em = 20px
em: 始终与当前元素的字号绑定, 只要改变当前这个字号,就可以动态的改变依赖它的所有的属性

案例效果

案例代码

案例总结

相关文章