实例演示盒模型属性简写的规则，实例演示em、rem的应用场景并分析区别和联系 -

一、属性值简写演示

二、实例演示盒模型属性简写规则

三、实例演示em、rem的应用场景，分析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>
      p {
        /* font-size: 60px; */
        /* font-weight: bolder; */
        /* font-style: italic; */
        /* font-family: Tahoma; */
        /* 用复合属性简写 */
        font: italic bolder 60px Tahoma;
        height: 100px;
        /* 背景 */
        background-color: lightblue;
        background-image: url(https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg);
        background-repeat: no-repeat;
        background-position: 30px 30px;
      }
    </style>
  </head>
  <body>
    <p>今天是2020年10月12号下午</p>
  </body>
</html>

上图：

二、实例演示盒模型属性简写

padding四个外边距属性设置分别为 padding-bottom、padding-left、、padding-top和padding-right；padding可以比作是盒子的内边距，比如手表盒中，手表在中间占了很小的一部分，手表到手表盒子边缘距离之间的填充物就是padding，padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。

当padding设定一个值时，该值代表内容到到四个边距的距离，如下图：

当padding设定两个值时，第一个值代表内容到到上下两个边距的距离，第二个值代表内容到左右两个边距的距离，如下图：

当padding设定三个值时，第一个值代表内容到上边距的距离，第二个值代表到左右两边距的距离，第三个值代表到下边距的距离，如下图：

当padding设定三个值时，第一个值代表内容到上边距的距离，第二个值代表到右两边距的距离，第三个值代表到下边距的距离，第四个值代表到左边距的距离，按照顺时针对应，上右下左，如下图：

margin属性可以为给定元素设置所有四个（上下左右）方向的外边距属性。四个外边距属性设置分别是：margin-top， margin-right， margin-bottom 和 margin-left 。可以比作手表的盒子放到桌子上，盒子到桌子边缘的距离就是margin的值，手表盒的边缘轮廓也就是我们说的border，magin值的简写和padding规则一样。遵循上右下左顺时针方向，结合老师所讲，不论是margi还是padding填写的值第二个都是和左右相关的，比如当值为两个时，那么第二个值代表左右，当值为三个时，第二个值也代表左右，当值为四个时，遵循顺时针规则，即上右下左顺序对应；

三、实例演示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>
      html {
        font-size: 16px;
      }
      p {
        background-color: royalblue;
        border-radius: 1em;
        padding: 1em;
        margin: 1em;
      }
      .box {
        font-size: 0.8rem;
        /* 此时第一个p字体为12.8px */
      }
      .box2 {
        font-size: 2rem;
                /* 此时第三个p标签字体为32px */
      }
    </style>
  </head>
  <body>
    <p class="box">em是相对元素</p>
    <p>这也是一段话</p>
    <p class="box2">这是一段话</p>
  </body>
</html>

上图

总结

em

相对于当前元素字号的相对单位
用在 padding,margin, border-radius,用 em 比较合适
px 通常用在边框上

rem

根元素字体大小
用它做为字号的单位