盒模型属性规则和em与rem应用场景

1.实例演示盒模型属性简写的规则
2.实例演示em与rem应用的场景,并分析区别与联系

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子</title>
    <style>
         :root{
           /*当前字号的相对单位
           用在 padding,margin, border-radius,用 em 比较合适
           px 通常用在边框上*/
           font-size: 1em;
         }
         .box{
           /*四个方向，按顺时针排列*/
           padding: 10px 15px 15px 20px;
           /* 当值只有三个时,第一个上, 第二个表示左右, 第三个表示下 */
           padding: 10px 30px 20px;
             /* 当值只有二个时,第一个表示上下, 第二个表示左右 */
           padding: 20px 40px;
             /* 四周都相同 */
           padding: 15px;
           /*rem根元素字体大小
           用它做为字号的单位*/
           font-size: 1.5rem;
         }
    </style>
  </head>
  <body>
    <div class="box">盒子</div>
  </body>
</html>

相关文章