1011作业

一、实例演示盒模型属性简写的规则
二、实例演示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>
      h2 {
        /* font-size: 28px;
        font-style: italic;
        font-weight: 200;
        font-family: Verdana, Geneva, Tahoma, sans-serif; */
        /* 复合属性 */
        font: italic lighter 28px tahoma;
        height: 100px;
        /* 背景 */
        background-color: aquamarine;
        background-image: url(https://img.php.cn/upload/course/000/000/001/5f606a9a7fe99960.jpg);
        background-repeat: no-repeat;
        background-position: 50px 20px;
      }
      /* 盒模型中的属性简写 */
      .box {
        width: 200px;
        height: 200px;
        background-color: wheat;
        background-clip: content-box;
        /* 四个方向按照顺时针走 */
        padding: 10px 15px 20px 25px;
        border: 5px solid #000;
        margin: 10px 15px 20px 25px;
      }
      .box {
        /* 当值只有三个时，第一个是上，第二个表示左右，第三个表示下 */
        padding: 10px 30px 20px;
        /* 当值只有二个时，第一个表示上下，第二个表示左右 */
        padding: 20px 40px;
        /* 四周都相同 */
        padding: 15px;
        /* padding margin 是透明的，之恩给你设置宽度，不能设置样式，颜色 */
        padding-top: 50px;
        margin: 30px 20px 40px;
      }
      .box {
        border-top-width: 20px;
        border-top-color: green;
        border-top-style: dotted;
        /* 边框的简写  顺序没关系*/
        border-top: 10px solid red;
      }
    </style>
  </head>
  <body>
    <h2>php中文网(php.cn)</h2>
    <div class="box"></div>
  </body>
</html>

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

1011作业

视频笔记

代码示例：属性值简写

相关文章