2_rem&em.html 721 B

12345678910111213141516171819202122232425262728293031
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. html{
  9. font-size: 20px;
  10. }
  11. .box{
  12. font-size: 30px;
  13. }
  14. .div1{
  15. /* rem 单位是相对于html的font-size 相当于 rem乘html的font-size */
  16. /* width: 10rem;
  17. height: 10rem; */
  18. /* em 单位是相对于父元素的font-size */
  19. height: 10em;
  20. width: 10em;
  21. background-color: red;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="box">
  27. <div class="div1"></div>
  28. </div>
  29. </body>
  30. </html>